Vue 3 中的 watch:监视多个数据
Vue 3 中的 watch
:监视多个数据
在 Vue 3 中,watch
不仅可以监视单个数据,还可以同时监视多个数据。监视多个数据时,可以将这些数据放在一个数组中,并通过 watch
来统一管理。接下来,我们将详细学习如何使用 watch
监视多个数据,并理解其背后的原理。
一、监视多个数据
(一)问题描述
在实际开发中,有时需要同时监视多个数据的变化。例如,监视一个人的名字和第一台车的变化。watch
支持将多个数据放在一个数组中进行监视。
(二)示例代码
HTML复制
<template>
<div>
<h1>情况五:监视多个数据</h1>
<p>姓名:{{ person.name }}</p>
<p>年龄:{{ person.age }}</p>
<p>第一台车:{{ person.car.c1 }}</p>
<p>第二台车:{{ person.car.c2 }}</p>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changeCar1">修改第一台车</button>
<button @click="changeCar2">修改第二台车</button>
<button @click="changeCar">修改整个车</button>
</div>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue';
const person = reactive({
name: '张三',
age: 18,
car: {
c1: '奔驰',
c2: '宝马'
}
});
const changeName = () => {
person.name += '波浪';
};
const changeAge = () => {
person.age += 1;
};
const changeCar1 = () => {
person.car.c1 = '奥迪';
};
const changeCar2 = () => {
person.car.c2 = '大众';
};
const changeCar = () => {
person.car = {
c1: '雅迪',
c2: '爱玛'
};
};
// 监视多个数据
watch([() => person.name, () => person.car.c1], ([newName, newCar1], [oldName, oldCar1]) => {
console.log('监视的数据变化了');
console.log('姓名从', oldName, '变为', newName);
console.log('第一台车从', oldCar1, '变为', newCar1);
});
</script>
(三)解释
-
定义响应式对象:使用
reactive
定义person
,包含name
、age
和car
。 -
修改方法:通过
changeName
、changeAge
、changeCar1
、changeCar2
和changeCar
方法修改对象的属性。 -
监视多个数据:
-
使用
watch
监视person.name
和person.car.c1
。 -
将需要监视的数据放在一个数组中,每个数据用函数形式表示。
-
回调函数中接收两个数组参数,分别表示新的值和旧的值。
(四)运行效果
-
点击“修改名字”按钮,
name
属性会变化,触发watch
。 -
点击“修改第一台车”按钮,
car.c1
属性会变化,触发watch
。 -
点击“修改年龄”、“修改第二台车”或“修改整个车”按钮,不会触发
watch
。
二、watch
的行为
(一)监视多个数据
监视多个数据时,可以将这些数据放在一个数组中。每个数据用函数形式表示,这样可以确保监视的是数据的值,而不是对象的引用。
(二)回调函数的参数
-
newValue
:变化后的值,是一个数组,包含每个监视数据的新值。 -
oldValue
:变化前的值,是一个数组,包含每个监视数据的旧值。
(三)示例代码
HTML复制
<template>
<div>
<h1>情况五:监视多个数据</h1>
<p>姓名:{{ person.name }}</p>
<p>年龄:{{ person.age }}</p>
<p>第一台车:{{ person.car.c1 }}</p>
<p>第二台车:{{ person.car.c2 }}</p>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changeCar1">修改第一台车</button>
<button @click="changeCar2">修改第二台车</button>
<button @click="changeCar">修改整个车</button>
</div>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue';
const person = reactive({
name: '张三',
age: 18,
car: {
c1: '奔驰',
c2: '宝马'
}
});
const changeName = () => {
person.name += '波浪';
};
const changeAge = () => {
person.age += 1;
};
const changeCar1 = () => {
person.car.c1 = '奥迪';
};
const changeCar2 = () => {
person.car.c2 = '大众';
};
const changeCar = () => {
person.car = {
c1: '雅迪',
c2: '爱玛'
};
};
// 监视多个数据
watch([() => person.name, () => person.car.c1], ([newName, newCar1], [oldName, oldCar1]) => {
console.log('监视的数据变化了');
console.log('姓名从', oldName, '变为', newName);
console.log('第一台车从', oldCar1, '变为', newCar1);
});
</script>
(四)运行效果
-
点击“修改名字”按钮,
name
属性会变化,触发watch
。 -
点击“修改第一台车”按钮,
car.c1
属性会变化,触发watch
。 -
点击“修改年龄”、“修改第二台车”或“修改整个车”按钮,不会触发
watch
。
三、最佳实践
(一)监视多个数据
-
将需要监视的数据放在一个数组中,每个数据用函数形式表示。
-
回调函数中接收两个数组参数,分别表示新的值和旧的值。
(二)注意事项
-
如果监视的是基本类型数据(如字符串、数字),需要写成函数形式。
-
如果监视的是对象类型数据,可以直接写属性路径,但建议写成函数形式,并开启深度监视(
deep: true
)。
四、总结
(一)监视多个数据
-
使用
watch
监视多个数据时,将需要监视的数据放在一个数组中。 -
每个数据用函数形式表示,确保监视的是数据的值,而不是对象的引用。
-
回调函数中接收两个数组参数,分别表示新的值和旧的值
而对应watch函数来说,在真正开发的过程中,监视最多的就是基本数据类型和对象类型的属性的值的变化了。
- 点赞
- 收藏
- 关注作者
评论(0)