vue3中watch使用及watchEffect对比

注意:一、监听reactive定义的响应式数据,此时无法正确获取oldValue,强制开启了深度监视(deep配置无效)

**特殊情况:如果监听的是reactive定义的对象中的某个属性(这个属性依然是一个对象),所以deep配置有效

示例:


二、监听多个数据时需要使用数组的形式,获取值也是数组形式

监听单个ref定义的数据

watch(sum,(newval,oldval)=>{

        //  console.log('sum变了',newval,oldval)

        // })


三、监听reactive定义的一个响应式数据中的某个属性

watch(()=>person.age,(nval,oval)=>{

            console.log('age变化了nval',nval)

            console.log('age变化了oval',oval)

        })


四、监听reactive定义的一个响应式数据中的某些属性

watch([()=>person.age,()=>person.firstname],(nval,oval)=>{

            console.log('person的age或firstname变化了',nval,oval)

        })


五、如果是使用ref定义的对象,可以监听该对象.value或者开启deep:true


watchEffect:相比于watch,watchEffect不需要指定监听的对象、回调,相当于computed计算属性但是不同的是watchEffect不需要返回值,更注重变化的过程

示例:当点击事件触发watchEffect依赖的属性值发生变化时就会执行watchEffect回调


你可能感兴趣的:(vue3中watch使用及watchEffect对比)