【Vue3】watch的几种用法

1.监听一个ref属性的变化

let num = ref(1);
watch(num,(newvalue,oldvalue)=>{
	console.log(newvalue,olavalue);
})

2.加入配置项(立刻监听）

let num = ref(1);
watch(num,(newvalue,oldvalue)=>{
	console.log(newvalue,olavalue);
}，{immediate:true})

3.监听多个ref属性的变化

let num1 = ref(1);
let num2 = ref(1);
watch([num1,num2],(newvalue,oldvalue)=>{
	console.log(newvalue,olavalue);
})

3.监听reactive定义对象的变化

const student = reactive({
       name:'张三',
       age:20,
       a:{
           b:{
               salary:'20k'
           }
       }
  })
function changeName(){
    student.name = student.name + '@'
}
function changeAge(){
    student.age ++
}
function changeSalary(){
    student.a.b.salary = "50k"
}
watch(student,(newV,oldV)=>{
    console.log(newV,oldV);
})

vue3默认开启深度监听，且设置deep:false无效
ractive定义的响应式数据无法正确获取到oldV的值

4.监听reactive定义的对象中的某个属性的变化

//上方代码watch改写为
watch(()=>student.name,(newValue,oldValue)=>{
    console.log(newValue,oldValue);
})

监听对象的某个属性需要将watch函数的第一个参数写为一个函数需要监听的属性作为返回值，可以正确的获得oldValue。

5.监听reactive定义的对象中的某些属性的变化

//watch改写为
watch([()=>student.name,()=>student.age],(newValue,oldValue)=>{
    console.log(newValue,oldValue);
})

可以正确的获得oldValue

6.监听reactive定义的对象中的嵌套很深的属性的变化

const student = reactive({
  a: {
    b: {
      salary: "20k",
    },
  },
});
function changeSalary() {
  student.a.b.salary = "10k";
}
watch(
  () => student.a,
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  },
  { deep: true }
);

此时需要开启深度监视才能监视到属性值的变化，且此时oldValue失效。

总结

1.对于监视reactive定义的响应式数据，oldValue无法正确获取到，且默认开启深度监视，deep属性失效
2.监视reactive定义的某个指定的响应式数据。oldValue可以正确获取到，且deep属性可以正常使用