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属性可以正常使用