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回调