Vue3.0 —— watch函数

 1、监听 ref 数据

 watch ( 要监听的目标，改变后触发的回调 )

 watch(count, (newValue, oldVlaue) => {
      console.log( newValue, oldVlaue);
 });

 2、监听通过 reactive 定义的对象数据,以及需要深度监听的情况

 
setup(){
    const obj = reactive({
      name: "ss",
      age: 54,
      brand: { 
        id: 1,
        name: "哈哈",
      },
    });

    //
    const update = () => {
      (obj.name = "sdd"), (obj.age = 44);
    };

    const updateBrandName = () => {
      obj.brand.name = "哇嘎嘎";
    };

    
    watch(obj,
        () => {
            console.log("数据改变了");
        },
        {
            // 深度监听
            deep: true,
            // 默认执行监听
            immediate: true,
        })
}

3、监听多个数据的变化（使用数组）

watch([count, obj], () => {
      console.log("监听多个数据");
});

4、只监听对象中某一个属性的变化   例obj.name

 watch(
    // 第一个参数为函数写法，返回该属性（固定写法）
      () => obj.name,
      () => {
        console.log("监听obj.name的变化");
      }
);