Vue2 和 Vue3 中的 watch 用法

数据

    let num = ref(0);
    let msg = ref('你好');
    let person = reactive({
      name: 'zs',
      age: 13,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

vue2中的写法

watch: {
    //简写
    // num(newVal, oldVal) {
    //   console.log('num值变化了', newVal, oldVal);
    // },

    //完整写法，可以配置参数
    num: {
      immediate: true, //刷新页面立即触发
      deep: true, //深度监听
      handler(newVal, oldVal) {
        console.log('num值变化了', newVal, oldVal);
      },
    },
 },

vue3中的写法

情况一，监视 ref 所定义的一个响应式数据

watch(num, function (newVal, oldVal) {
      console.log('num值变化了', newVal, oldVal);
},{immediate:true,deep:true});
//num值变化了 4 3

情况二，监视 ref 所定义的多个响应式数据

watch([num, msg], function (newVal, oldVal) {
        console.log('num或msg值变化了', newVal, oldVal);
},{ immediate: true });
//num或msg值变化了 (2) [1, '你好'] (2) [0, '你好']

情况三，监视 reactive 所定义的一个响应式数据

1.注意：此处无法正确获取oldVal
2.注意：强制开启了深度监视，（deep配置无效）

watch(person, (newVal, oldVal) => {
      console.log('person值变化了', newVal, oldVal);
},{deep:true});//此处的deep配置无效

输出结果：

情况四，监视 reactive 所定义的一个响应式数据中的某个属性,(需要写到函数里面)

watch(()=>person.age, (newVal, oldVal) => {
      console.log('person.age值变化了', newVal, oldVal);
});
//person.age值变化了 14 13

情况五，监视 reactive 所定义的一个响应式数据中的某些属性,(需要用数组包裹，在写到函数里面)

watch([()=>person.age,()=>person.name], (newVal, oldVal) => {
      console.log('person.age或.name值变化了', newVal, oldVal);
});

输出结果：

特殊情况

watch(()=>person.job, (newVal, oldVal) => {
      console.log('person.job值变化了', newVal, oldVal);
},{deep:true});//此处由于监视的是reactive所定义的对象中的某个属性，所以deep配置有效

输出结果：

watchEffect
watch 的套路是：既要指明监视的属性，也要指明监视的回调
watchEffect 的套路是：不用指明监视哪个属性，监视的回掉中用到那个属性，那就监视哪个属性
watchEffect 有点像computed：

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

watchEffect(() => {
      const s = msg.value;
      console.log('watchEffect执行了当前信息', s);
});
//每次修改msg都会执行

总结：

1.监视 ref 所定义的一个响应式数据(可以正常拿到 newVal oldVal)
2.监视 ref 所定义的多个响应式数据(可以正常拿到 newVal oldVal, 吧监视的属性放到数组里面)
3.监视 reactive 所定义的一个响应式数据(监视对象)(无法正确获取 oldVal,强制开启了深度监视，deep配置无效)
4.监视 reactive 所定义的一个响应式数据中的某个属性(监视对象中的某个属性,如果监视的属性是个对象,需要开启深度监视 deep),(可以正常拿到 newVal oldVal,监视的属性需要写到函数里面)
5.监视 reactive 所定义的一个响应式数据中的某些属性(监视对象中的某些属性),(可以正常拿到 newVal oldVal,需要用数组包裹，在写到函数里面)