vue2、vue3中watch的对比

一、在vue2的使用

watch: {
        // 默认情况下我们的监听器只会针对监听的数据本身的改变(内部发生的改变是不能监听)
        
        // info(newInfo, oldInfo) {
        //   console.log("newValue:", newInfo, "oldValue:", oldInfo);
        // }

        // 深度监听/立即执行
        info: {
          handler: function(newInfo, oldInfo) {
            console.log("newValue:", newInfo.nba.name, "oldValue:", oldInfo.nba.name);
          },
          deep: true, // 深度监听
          immediate: true // 立即执行
        }
}

二、在vue3的使用

//1、 监听简单数据
const stop = watch('a', (newVal, oldVal) => {
   // todo
if(){
	stop()
}
})


//2、 监听引用数据类型  第一个参数为函数 可达到深度监听的效果 
    watch(
      () => obj.a.b,
      (newVal, oldVal) => {
        // 做点什么
      }
    )


 //3、 数组监听的最佳实践- reactive
    watch(() => arr, (newVal, oldVal) => {
      console.log('newVal', newVal);
      console.log('oldVal', oldVal);
    });
//4、 监听多个数据源
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  todo
})

//5、watchEffect
watchEffect(()=>{
        const x1 = sum.value//因为sum是ref定义的响应式数据，需要使用.value调用
        const x2 = person.age
        console.log('watchEffect配置的回调执行了')
    })