vue3的基本数据类型监听和引用数据类型的监听

Posted 2023-03-27

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

watch(sum, (newVal, oldValue) =>

        console.log(newVal, oldValue);

  );

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

watch([sum, tips], (newVal, oldValue) =>

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

    );

3.监听对象(reactive)，不建议使用

watch(state,(newVal, oldValue) =>

        console.log(newVal, oldValue);  //name: '老王', age: 23,name: '老王', age: 23

      ,

      deep: false

    );

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

watch(() => state.count, (newVal, oldValue) =>

          console.log(newVal, oldValue);

     

    );

5.监听对象中某几个属性（reactive)，建议使用

watch([() => obj.test, () => obj.year], (newVal, oldValue) =>

      console.log(newVal, oldValue);  //得到的是对象

     

    );