Why
- 以下主要介绍在
Vue中如何使用监视数据的变化。
- 需要导入
watch。
How
ref的基本数据
let sum = ref(0);
watch(sum, (newValue, oldValue) => {
console.log("sum值发生了变化", newValue, oldValue);
});
ref包裹的对象
let my = ref({
name: "peng",
age: 25,
});
function ChangeAge() {
my.value.age++;
if (my.value.age > 30) {
stopWatch();
}
}
let stopWatch = watch(
() => my.value.age,
(newValue, oldValue) => {
console.log("sum值发生了变化", newValue, oldValue);
},
{
deep: true,
}
);
- 注意监视是有返回值的，如果使用这个返回值函数，则表示取消监视。
reactive的对象的基本类型
let person = reactive({
name: "Peng",
age: 3,
phone: 15154,
car: {
c1: "宝马",
c2: "奔驰",
},
});
watch(
() => person.age,
(newValue, oldValue) => {
console.log("person.age值发生了变化", newValue, oldValue);
}
);
- 注意使用
reactive的对象调用的时候是不需要使用.value的。
reactive包裹的对象
- 类似于上述，如果函数返回的是一个对象，则需要开启
deep:true的选项，因为其实reactive内部还是使用ref来实现的。
watch(
() => person.car,
(newValue, oldValue) => {
console.log("person.car.c1值发生了变化", newValue, oldValue);
},
{ deep: true }
);
返回一个包裹的数组
watch([() => person.age, () => person.car.c1], ([age, c1], [oldAge, oldC1]) => {
console.log("person.age和person.car.c1值发生了变化", age, c1, oldAge, oldC1);
});
- 注意区别于上述的
newValue和oldValue，这个时候表示的是一个数组的值而不是一个单一的对象。
Tips
- 注意，在绝大部分的时候还是建议使用返回函数，因为这样是最稳妥的方案。大部分时候第五种监视才是最常见的写法。
