Vue 3 中的 watch:监视 ref 定义的对象类型数据
Vue 3 中的 watch
:监视 ref
定义的对象类型数据
在 Vue 3 中,watch
不仅可以监视 ref
定义的基本类型数据,还可以监视 ref
定义的对象类型数据。监视对象类型数据时,watch
的行为会有所不同,需要特别注意。接下来,我们将详细学习如何使用 watch
监视对象类型数据,并理解其背后的原理。
一、监视 ref
定义的对象类型数据
(一)问题描述
ref
定义的对象类型数据可以包含多个属性,例如 name
和 age
。监视对象类型数据时,watch
默认只会监视对象的引用(地址值),而不是对象内部的属性。
(二)示例代码
HTML复制
<template>
<div>
<h1>情况二:监视 ref 定义的对象类型数据</h1>
<p>姓名:{{ person.name }}</p>
<p>年龄:{{ person.age }}</p>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changePerson">修改整个人</button>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
const person = ref({
name: '张三',
age: 18
});
const changeName = () => {
person.value.name += '波浪';
};
const changeAge = () => {
person.value.age += 1;
};
const changePerson = () => {
person.value = {
name: '李四',
age: 90
};
};
watch(person, (newValue, oldValue) => {
console.log('person 变化了');
console.log('新的值:', newValue);
console.log('旧的值:', oldValue);
}, { deep: true });
</script>
(三)解释
-
定义响应式对象:使用
ref
定义person
,包含name
和age
。 -
修改对象属性:通过
changeName
和changeAge
方法修改对象的属性。 -
修改整个对象:通过
changePerson
方法修改整个对象。 -
监视对象:使用
watch
监视person
,并开启深度监视(deep: true
)。
如果不开启深度监视的话,对象的属性发生变化监视不到
(四)运行效果
-
点击“修改名字”按钮,
name
属性会变化。 -
点击“修改年龄”按钮,
age
属性会变化。 -
点击“修改整个人”按钮,整个对象会被替换。
-
控制台会打印
newValue
和oldValue
。
二、watch
的行为
(一)默认行为
默认情况下,watch
只会监视对象的引用(地址值)。如果对象内部的属性发生变化,watch
不会触发回调函数。
(二)深度监视
通过设置 deep: true
,可以监视对象内部的属性变化。开启深度监视后,watch
会监视对象的所有嵌套属性。
(三)newValue
和 oldValue
-
newValue
:变化后的值。 -
oldValue
:变化前的值。
(四)特殊情况
-
如果修改的是对象内部的属性(如
person.name
或person.age
),newValue
和oldValue
会是同一个对象。 -
如果修改的是整个对象(如
person.value = { ... }
),newValue
和oldValue
会是不同的对象。
(五)示例代码
HTML复制
<template>
<div>
<h1>情况二:监视 ref 定义的对象类型数据</h1>
<p>姓名:{{ person.name }}</p>
<p>年龄:{{ person.age }}</p>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changePerson">修改整个人</button>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
const person = ref({
name: '张三',
age: 18
});
const changeName = () => {
person.value.name += '波浪';
};
const changeAge = () => {
person.value.age += 1;
};
const changePerson = () => {
person.value = {
name: '李四',
age: 90
};
};
watch(person, (newValue, oldValue) => {
console.log('person 变化了');
console.log('新的值:', newValue);
console.log('旧的值:', oldValue);
}, { deep: true });
</script>
(六)运行效果
-
点击“修改名字”和“修改年龄”按钮时,
watch
会触发回调函数。 -
点击“修改整个人”按钮时,
watch
会触发回调函数。 -
控制台会打印
newValue
和oldValue
。
三、watch
的配置项
(一)deep
-
作用:开启深度监视,监视对象内部的属性变化。
-
默认值:
false
。
(二)immediate
-
作用:立即执行回调函数,无论数据是否变化。
-
默认值:
false
。
(三)示例代码
HTML复制
<template>
<div>
<h1>情况二:监视 ref 定义的对象类型数据</h1>
<p>姓名:{{ person.name }}</p>
<p>年龄:{{ person.age }}</p>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changePerson">修改整个人</button>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
const person = ref({
name: '张三',
age: 18
});
const changeName = () => {
person.value.name += '波浪';
};
const changeAge = () => {
person.value.age += 1;
};
const changePerson = () => {
person.value = {
name: '李四',
age: 90
};
};
watch(person, (newValue, oldValue) => {
console.log('person 变化了');
console.log('新的值:', newValue);
console.log('旧的值:', oldValue);
}, { deep: true, immediate: true });
</script>
(四)运行效果
-
页面加载时,
watch
会立即执行回调函数。 -
修改
person
的属性或整个对象时,watch
会触发回调函数。
四、总结
(一)watch
的作用
watch
用于监视数据的变化,并在数据变化时执行指定的逻辑。
(二)监视的数据类型
watch
可以监视以下四种数据:
-
ref
定义的数据 -
reactive
定义的数据 -
函数返回的值
-
上述内容组成的数组
(三)监视对象类型数据
-
默认行为:监视对象的引用(地址值)。
-
深度监视:通过设置
deep: true
,可以监视对象内部的属性变化。 -
newValue
和oldValue
:如果修改的是对象内部的属性,newValue
和oldValue
会是同一个对象;如果修改的是整个对象,newValue
和oldValue
会是不同的对象。
(四)配置项
-
deep
:开启深度监视。 -
immediate
:立即执行回调函数。
- 点赞
- 收藏
- 关注作者
评论(0)