watch的使用及注意点

1.引入watch

import {ref,watch,reactive } from "vue";

2.场景

（1）基本数据类型

// 监听ref定义单个
export default {
  setup() {
    const count = ref(0);
    watch(count, (newValue, preValue) => {
      console.log("count修改了", newValue, preValue);
    });
    return {
      count
    };
  },
};
//监听ref定义多个
export default {
  setup() {
    const count = ref(0);
    const msg = ref("你说");
    watch([count, msg], (newValue, preValue) => {
      console.log("count/msg修改了", newValue, preValue);
    });
    return {
      count,
      msg,
    };
  },
};

（1）引用数据类型

// 监听reactive定义单个
export default {
  setup() {
    const person = reactive(
        age:30,
        name:'你是',
        job:{
            name:'nishi',
            age:18
        }
    )
    watch(()=>person.age,(newValue, preValue) => {
      console.log("person.age修改了", newValue, preValue);
    });
    return {
      person
    };
  },
};
// 监听reactive定义多个
export default {
  setup() {
    const person = reactive(
        age:30,
        name:'你是',
        job:{
            name:'nishi',
            age:18
        }
    )
    watch([()=>person.age,()=>person.name],(newValue, preValue) => {
      console.log("person.age/person.name修改了", newValue, preValue);
    });
    return {
      person
    };
  },
};
//监听reactive定义对象，开启深度监视无效，无法获取newValue, preValue
export default {
  setup() {
    const person = reactive(
        age:30,
        job:{
            name:'nishi',
            age:18
        }
    )
    watch(person, (newValue, preValue) => {
      console.log("person修改了", newValue, preValue);
    },{deep:true});  //深度监视无效
    return {
      person
    };
  },
};
//监听reactive定义对象中的某个属性job,开启深度监视
export default {
  setup() {
    const person = reactive(
        age:30,
        job:{
            name:'nishi',
            age:18
        }
    )
    watch(()=>person.job, (newValue, preValue) => {
      console.log("person.job修改了", newValue, preValue);
    },{deep:true});
    return {
      person
    };
  },
};