Vue 3 中的 watch:监视 reactive 定义的对象类型数据
Vue 3 中的 watch
:监视 reactive
定义的对象类型数据
在 Vue 3 中,watch
不仅可以监视 ref
定义的数据,还可以监视 reactive
定义的对象类型数据。监视 reactive
定义的数据时,watch
默认会开启深度监视,并且这种深度监视是无法关闭的。接下来,我们将详细学习如何使用 watch
监视 reactive
定义的数据,并理解其背后的原理。
一、监视 reactive
定义的对象类型数据
(一)问题描述
reactive
用于定义对象类型的数据,它会自动将对象及其嵌套的属性变成响应式。监视 reactive
定义的数据时,watch
默认会开启深度监视,这意味着它会监视对象内部的所有属性变化。也就是隐式的创建了深度的监听
(二)示例代码
HTML复制
<template>
<div>
<h1>情况三:监视 reactive 定义的对象类型数据</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 { reactive, watch } from 'vue';
const person = reactive({
name: '张三',
age: 18
});
const changeName = () => {
person.name += '波浪';
};
const changeAge = () => {
person.age += 1;
};
const changePerson = () => {
Object.assign(person, {
name: '李四',
age: 90
});
};
watch(person, (newValue, oldValue) => {
console.log('person 变化了');
console.log('新的值:', newValue);
console.log('旧的值:', oldValue);
});
</script>
(三)解释
-
定义响应式对象:使用
reactive
定义person
,包含name
和age
。 -
修改对象属性:通过
changeName
和changeAge
方法修改对象的属性。 -
修改整个对象:通过
Object.assign
修改整个对象。 -
监视对象:使用
watch
监视person
,默认开启深度监视。
(四)运行效果
-
点击“修改名字”按钮,
name
属性会变化。 -
点击“修改年龄”按钮,
age
属性会变化。 -
点击“修改整个人”按钮,整个对象会被替换。
-
控制台会打印
newValue
和oldValue
。
二、watch
的行为
(一)默认行为
监视 reactive
定义的数据时,watch
默认会开启深度监视,这意味着它会监视对象内部的所有属性变化。
(二)newValue
和 oldValue
-
newValue
:变化后的值。 -
oldValue
:变化前的值。 -
特殊情况:如果修改的是对象内部的属性,
newValue
和oldValue
会是同一个对象,因为对象的引用没有变化。
(三)示例代码
HTML复制
<template>
<div>
<h1>情况三:监视 reactive 定义的对象类型数据</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 { reactive, watch } from 'vue';
const person = reactive({
name: '张三',
age: 18
});
const changeName = () => {
person.name += '波浪';
};
const changeAge = () => {
person.age += 1;
};
const changePerson = () => {
Object.assign(person, {
name: '李四',
age: 90
});
};
watch(person, (newValue, oldValue) => {
console.log('person 变化了');
console.log('新的值:', newValue);
console.log('旧的值:', oldValue);
});
</script>
(四)运行效果
-
点击“修改名字”和“修改年龄”按钮时,
watch
会触发回调函数。 -
点击“修改整个人”按钮时,
watch
会触发回调函数。 -
控制台会打印
newValue
和oldValue
。
三、reactive
的局限性
(一)不能整体替换对象
reactive
定义的对象不能直接整体替换。例如,以下代码是无效的:
JavaScript复制
person = { name: '李四', age: 90 }; // 错误:失去响应式
(二)解决方案
使用 Object.assign
或展开运算符来更新对象的属性:
JavaScript复制
Object.assign(person, { name: '李四', age: 90 });
四、总结
(一)watch
的作用
watch
用于监视数据的变化,并在数据变化时执行指定的逻辑。
(二)监视 reactive
定义的数据
-
默认行为:监视
reactive
定义的数据时,默认开启深度监视。 -
深度监视:监视对象内部的所有属性变化。
-
newValue
和oldValue
:如果修改的是对象内部的属性,newValue
和oldValue
会是同一个对象。
(三)代码示例
HTML复制
<template>
<div>
<h1>情况三:监视 reactive 定义的对象类型数据</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 { reactive, watch } from 'vue';
const person = reactive({
name: '张三',
age: 18
});
const changeName = () => {
person.name += '波浪';
};
const changeAge = () => {
person.age += 1;
};
const changePerson = () => {
Object.assign(person, {
name: '李四',
age: 90
});
};
watch(person, (newValue, oldValue) => {
console.log('person 变化了');
console.log('新的值:', newValue);
console.log('旧的值:', oldValue);
});
</script>
通过上述内容,你可以更好地理解和使用 Vue 3 中的 watch
。在实际开发中,watch
是一个非常有用的工具,可以帮助你在数据变化时执行复杂的逻辑。
- 点赞
- 收藏
- 关注作者
评论(0)