watch 监听属性

watch 函数接收三个参数
第一个为指定要监听的数据
第二个为监听的执行函数
第三个为 watch 执行时的配置

定义 watch 监听属性

import { watch , ref } from 'vue'
export default {
  setup( ) {
    let a = ref( 0 )

    //定义 watch 监听属性
    watch( a , ( newValue , oldValue ) => {
        监听属性执行体...
    })

    return { a }
  }
}

watch 监听多个数据

import { watch, ref } from "vue";
export default {
  setup() {
    let a = ref(0);
    let b = ref("xxx");

    //定义 watch 监听多个数据
    watch([a, b], (newValue, oldValue) => {
      // newValue: [  ]
      // oldValue: [ 0 , 'xxx' ]
    });

    return { a };
  },
};

当监听的对象为数组形式时，可以同时监听多项数据，同时执行函数中接收到的 newValue 和 oldValue 也变为了数组形式。数组内数据的顺序与定义时，指定监听的多项数据顺序一致。

watch 设置项

设置 immediate、deep 配置项
watch 接收的第三个参数进行配置

import { watch , ref } from 'vue'
export default {
  setup( ) {
    let a = ref( 0 )

    //定义 watch 监听属性
    watch( a ,
      ( newValue , oldValue ) => {
          监听属性执行体...
      } ,
      {
        immediate: true, //设置 immediate
        deep: true //设置 deep
      }
    )

    return { a }
  }
}

监听对象为对象时

import { reactive , watch } from 'vue'
export default {
  setup( ) {
    let a = reactive({
      a: 1,
      b: 2
    })

    //定义 对象 复杂类型的监听属性
    watch( a ,
    ( newValue , oldValue ) => {
        监听属性执行体...
    },
    {
      immediate: true,
      deep: true //此处为强制开启 deep
    } )
  }
}

当监听的对象为 reactive 声明的响应式数据时，强制性深度监听内部属性，且无法关闭，即便 deep 为 false 也无效

监听对象数据中的某一个属性

import { reactive , watch } from 'vue'
export default {
  setup( ) {
    let a = reactive({
      a: 1,
      b: 2
    })

    //定义 对象 复杂类型中某一属性的监听
    watch( ( ) => a.b ,
    ( newValue , oldValue ) => {
        监听属性执行体...
    } )
  }
}

需要监听对象中某一个属性时，需要将第一个参数改为函数式写法，这个函数的返回值为需要进行监听的某一个属性。此处返回值为 a.b ，将只会监听对象 a 中的属性 b

监听对象数据中的某一些属性

import { reactive , watch } from 'vue'
export default {
  setup( ) {
    let a = reactive({
      a: 1,
      b: 2
    })

    //定义 对象 复杂类型中某一些属性的监听
    watch( [
        ( ) => a.b ,
        ( ) => a.a
     ] ,
    ( newValue , oldValue ) => {
        监听属性执行体...
    } )
  }
}

将第一个参数改为数组形式，数组中定义多个函数，每个返回值代表监听某一个属性。通过指定多个函数，实现监听对象中的一些属性

特殊情况

监听 reactive 函数声明的响应式对象数据中的某一项属性，且这项属性为多层结构时，需要开启 deep ，才能监听到深层次中的数据

import { reactive , watch } from 'vue'
export default {
  setup( ) {
    let a = reactive({
      a: 1,
      b: 2,
      c: {
        d: {
          e: 3
         }
       }
    })

    //定义 对象 复杂类型中某一多层次属性的监听
    watch( ( ) => a.c ,
      ( newValue , oldValue ) => {
          监听属性执行体...
      } ,
      {
        deep: true
      }
    )
  }
}

此处，当对 a.c.d.e 这个属性进行修改时，且监听的方式为函数返回值的方式进行，则必须配置 deep 为 true 才能监听到属性的变化。而监听的是整个 reactive 声明的对象数据时，则是强制性的开启了 deep 深度监听。

当使用 ref 函数定义复杂数据类型时，实现数据的监听

import { ref , watch } from 'vue'
export default {
  setup( ) {
    let a = ref({
      a: 1,
      b: 2
    })

    // 方式一 使用 ref 引用实现的 .value
    watch( a.value ,
    ( newValue , oldValue ) => {
        监听属性执行体...
    } )

    // 方式二 开启 deep 深度监听
    watch( a ,
    ( newValue , oldValue ) => {
        监听属性执行体...
    } ,
    {
      deep: true
    })
  }
}

# watch 监听属性

watch 监听属性