vue3 watch监听函数的使用方法汇总

watch介绍

 vue中watch用来监听数据的响应式变化.获取数据变化前后的值

 watch监听器可以监听一个getter函数，这个getter要返回一个响应式对象

当该对象更新后，会执行对应的回调函

// watch的完整入参

watch(监听的数据，副作用函数，配置对象)
watch(data, (newVal, oldVal) => {}, {immediate: true, deep: true})

watch监听的不同场景

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

// 创建响应式数据
let name = ref("小红");
let age = ref(18);
let state = reactive({
  sex: "女",
  city: {
    hainan: {
      haikoushi: "海口市",
    },
  },
});

监听单个refimpl数据

watch(name, (newName, oldName) => {
  console.log("newName", newName);
});

监听多个refimpl数据，任何一个响应式对象更新，就会执行回调函数

 方式一：vue3允许多个watch监听器存在

watch(name, (newValue, oldValue) => {
  console.log("new", newValue, "old", oldValue);
});

watch(age, (newValue, oldValue) => {
  console.log("new", newValue, "old", oldValue);
});

 方式二：将需要监听的数据添加到数组

//第一种写法
watch([name, age], (newValue, oldValue) => {
  // 返回的数据是数组
  console.log("new", newValue, "old", oldValue); 
  //[newName, newAge] [oldName, oldAge]
});

//还有第二种写法
watch([name, age], ([newName, newAge], [oldName, oldAge]) => { 
})

监听proxy数据

 监听 reactive 定义的响应式数据

 此时vue3将强制开启deep深度监听
 当监听值为proxy对象时，oldValue值将出现异常，此时与newValue相同

  newValue=== oldValue，根本就是同一个内容地址，就是对象本身

// 监听proxy对象
watch(state, (newValue, oldValue) => {
  console.log("newValue", newValue, "oldValue", oldValue);
});

监听proxy数据的某个属性

需要将监听值写成函数返回形式,vue3无法直接监听对象的某个属性变化 

监听的属性值是基本类型数据，需要写成函数返回该属性的方式才能监听到

watch(
  () => state.sex,
  (newValue, oldValue) => {
    console.log("newValue",newValue, "oldvalue", oldValue);
  }
);

 当监听proxy对象的属性为复杂数据类型时，需要开启deep深度监听

watch(
  () => person.city,
  (newvalue, oldvalue) => {
    console.log("person.city newvalue", newvalue, "oldvalue", oldvalue);
  },{ deep: true , immediate: true }
);

监听proxy数据的某些属性

watch([() => state.age, () => state.name], (newValue, oldValue) => {
  // 此时newValue为数组
  console.log("state.age", newValue, oldValue);
});

watchEffect的使用

watchEffect会立即执行；

不需要手动传入所需要监听的数据；

接收的参数为一个回调函数；

只能获取新值，无法获取修改之前的值

// 监听数据
watchEffect(() => {
  console.log(state.sex,'--',state.city)
});

停止监听

// 监听数据
let stop = watchEffect(() => {
  console.log(state.sex,'--',state.city)
  setTimeout(()=>{
     stop();
  },3000);
});

总结

 监听reactive定义的proxy代理数据时

oldValue无法正确获取

强制开启deep深度监听（无法关闭）

监听reactive定义的proxy代理对象某个属性时deep配置项生效