vue3 watch侦听器填坑详细分析 附加实例

两个小“坑”：

• 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
• 监视reactive定义的响应式数据中某个属性时：deep配置有效。

如果监听reactive所定义的响应式中的某些属性    watch第一个参数要传一个函数  返回值为要监听的对象属性   

watch(() => person.age, (nv, ov) => {
console.log('person的age变了', nv, ov);
})

.watchEffect函数

• watch的套路是：既要指明监视的属性，也要指明监视的回调。

• watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

• watchEffect有点像computed：

  • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
  • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

    
    //watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
    watchEffect(()=>{
        const x1 = sum.value
        const x2 = person.age
        console.log('watchEffect配置的回调执行了')
    })

    //watchEffect
    //不确定监视对象
    //默认开启了immediate:true
    watchEffect(() => {
    console.log(`watch effect指定的回调执行了！！`)
    //依赖收集,你用到了谁它就监视谁！！
    //这里用到sum, person.job.j1.salary了,所以可以被监视到(只要它们发生变化就重新执行watchEffect)
    //与computed有点类似，依赖收集.(侧重点不一致,watchEffect注重过程,而computed注重计算函数的返回值)
    const x1 = sum.value;
    const x2 = person.job.j1.salary;
    })