vue3.x常用的watch监听方式

方式一:监听单个基本数据类型(ref)，（ref定义的基本类型使用watch监听时候不需要.value）

   watch(sum, (newVal, oldValue) => {
        console.log(newVal, oldValue);
   });

方式二:监多个基本数据类型(ref)

   watch([sum, tips], (newVal, oldValue) => {
      console.log(newVal, oldValue);// [121, 'a']，[78, 'b']监听结果新的值和旧的值都是数组
    });

方式三:监听对象(reactive)，不建议使用

    这种监听方式，在vue3存在问题：（不建议直接监听reactive整个对象）
     1.reactive和ref响应式使用proxy代理无法正确监听并获取对象旧的值（拿到的都是新值）
     2.强制开启深度监听,设置false关闭无效(deep配置无效)

    watch(state,(newVal, oldValue) => {
        console.log(newVal, oldValue);  //{name: '老王', age: 23},{name: '老王', age: 23}
      },
      { deep: false }
    );

方式四:监听对象中某一个属性变化（reactive)，强烈建议使用此方式监听reactive响应对象数据（无坑）

     watch(() => state.count, (newVal, oldValue) => {
          console.log(newVal, oldValue);
       }
     );

方式五:监听对象中某几个属性（reactive)，建议使用

    watch([() => obj.test, () => obj.year], (newVal, oldValue) => {
       console.log(newVal, oldValue);   //得到的是对象
       }
    );