Vue的watch（监听器）是可以在页面初始化的时候执行的，不一定得是监听的值改变后才执行

immediate属性可以让watch在页面初始化后就执行

Vue2:

<template>
    <div>
       
    </div>
</template>

<script>
export default {
    data(){
        return{
            a:'a'
        }
    },
    watch:{
        a:{
            immediate:true,
            handler(newV,oldV){
                console.log(newV,oldV);
            }
        }
    }
}
</script>

<style lang="less" scoped>

</style>

在浏览器控制台输出：a undefined

后续的操作，例如对data数据进行赋值都是正常继续执行的。

<template>
    <div>
      
    </div>
</template>

<script>
export default {
    data(){
        return{
            a:'a'
        }
    },
    watch:{
        a:{
            immediate:true,
            handler(newV,oldV){
                console.log(newV,oldV);
            }
        }
    },
    mounted(){
        setTimeout(()=>{
            this.a="b";
        },2000)
    }
}
</script>

<style lang="less" scoped>

</style>

Vue3:

<template>

</template>

<script>
import {ref, onMounted, watch } from 'vue'
export default {
  setup(props,content){
    let a=ref('a')
    watch(a,(newV,oldV)=>{
      console.log(newV,oldV);
    },{
      immediate:true
    })
    return{
      
    }
  }
}
</script>

<style lang="less" scoped>

</style>

浏览器控制台输出的是 a undefined

后续的操作都是不会受到影响的，例如更改响应式定义的a变量也是正常的

<template>

</template>

<script>
import {ref, onMounted, watch } from 'vue'
export default {
  setup(props,content){
    let a=ref('a')
    watch(a,(newV,oldV)=>{
      console.log(newV,oldV);
    },{
      immediate:true
    })
    onMounted(()=>{
      setTimeout(()=>{
         a.value="b"
      },2000)
    })
    return{
      
    }
  }
}
</script>

<style lang="less" scoped>

</style>