【Vue3】watch 和 watchEffect

一、watch

---

如果定义了reactive的数据（或者用ref包裹了引用类型等同开启reactive），想去使用watch监听数据改变，则无法正确获取旧值，并且deep属性配置无效，自动强制开启了深层次监听

watch 的三个参数

1. watch第一个参数,监听源

2. watch第二个参数,回调函数cb（newVal,oldVal）

3. watch第三个参数,一个options配置项是一个对象

   {
   
       immediate:true //是否立即调用一次
       
       deep:true //是否开启深度监听
   
   }
   

那么现在有一组响应式源对象，该如何监听呢。

    // 响应式源对象
    let sum = ref(0)
    let msg = ref('你好')
    let person =reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

情况1：监视ref定义的一个响应式数据

    watch(sum,(newValue,oldValue)=>{
      console.log('sum的值变化了',newValue,oldValue);
    },{immediate:true})

情况2：监视ref定义的多个响应式数据

    //    合并写以数组形式监听
    watch([sum,msg],(newValue,oldValue)=>{
      console.log('sum或msg的值变化了',newValue,oldValue);
    },{immediate:true})

情况3：监视reactive定义的一个响应式数据的全部属性

    /*
          1.注意：此处无法正确的获取oldValue
          1.注意：强制开启了深度监视（deep配置无效）
    */
    watch(person,(newValue,oldValue)=>{
      console.log('person变化了',newValue,oldValue);
    },{deep:false}) // 此处的deep无效

情况4：监视reactive定义的一个响应式数据的某一个属性

    watch( ()=>person.age ,(newValue,oldValue)=>{
      console.log('person年龄变化了',newValue,oldValue);
    })

情况5：监视reactive定义的一个响应式数据的某些属性

    watch( [()=>person.age,()=>person.name] ,(newValue,oldValue)=>{
      console.log('person年龄或姓名变化了',newValue,oldValue);
    })

特殊情况

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

二、watchEffect 高级监听器

---

watch 和watchEffect的区别

1. watch默认是惰性的（immedate默认为false）,而watchEffect则默认会立即执行并开启深度监听。
2. watchEffect 无法访问侦听数据的新值和旧值。
3. watchEffect可以直接监听对象的属性，而不用像watch用函数包裹后才能办到。

    // 响应式源对象
    let sum = ref(0);
    let msg = ref("你好");
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    // 监视
    /* watch(sum, (newValue, oldValue) => {
      console.log("sum的值变化了");
    },{immediate:true}); */

    watchEffect(()=>{
      const x1 = sum.value
      const x2 = person.job.j1.salary
      console.log('watchEffect所制定的回调');
    })