Vue 3 中的 watch:监视 reactive 定义的对象类型数据

举报
周杰伦本人 发表于 2025/01/22 14:26:14 2025/01/22
【摘要】 Vue 3 中的 watch:监视 reactive 定义的对象类型数据在 Vue 3 中,watch 不仅可以监视 ref 定义的数据,还可以监视 reactive 定义的对象类型数据。监视 reactive 定义的数据时,watch 默认会开启深度监视,并且这种深度监视是无法关闭的。接下来,我们将详细学习如何使用 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>

(三)解释

  1. 定义响应式对象:使用 reactive 定义 person,包含 nameage

  2. 修改对象属性:通过 changeNamechangeAge 方法修改对象的属性。

  3. 修改整个对象:通过 Object.assign 修改整个对象。

  4. 监视对象:使用 watch 监视 person,默认开启深度监视。

(四)运行效果

  • 点击“修改名字”按钮,name 属性会变化。

  • 点击“修改年龄”按钮,age 属性会变化。

  • 点击“修改整个人”按钮,整个对象会被替换。

  • 控制台会打印 newValueoldValue


二、watch 的行为

(一)默认行为

监视 reactive 定义的数据时,watch 默认会开启深度监视,这意味着它会监视对象内部的所有属性变化。

(二)newValueoldValue

  • newValue:变化后的值。

  • oldValue:变化前的值。

  • 特殊情况:如果修改的是对象内部的属性,newValueoldValue 会是同一个对象,因为对象的引用没有变化。

(三)示例代码

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 会触发回调函数。

  • 控制台会打印 newValueoldValue


三、reactive 的局限性

(一)不能整体替换对象

reactive 定义的对象不能直接整体替换。例如,以下代码是无效的:

JavaScript复制

person = { name: '李四', age: 90 }; // 错误:失去响应式

(二)解决方案

使用 Object.assign 或展开运算符来更新对象的属性:

JavaScript复制

Object.assign(person, { name: '李四', age: 90 });

四、总结

(一)watch 的作用

watch 用于监视数据的变化,并在数据变化时执行指定的逻辑。

(二)监视 reactive 定义的数据

  • 默认行为:监视 reactive 定义的数据时,默认开启深度监视。

  • 深度监视:监视对象内部的所有属性变化。

  • newValueoldValue:如果修改的是对象内部的属性,newValueoldValue 会是同一个对象。

(三)代码示例

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 是一个非常有用的工具,可以帮助你在数据变化时执行复杂的逻辑。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。