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

举报
周杰伦本人 发表于 2025/01/22 14:24:05 2025/01/22
【摘要】 Vue 3 中的 watch:监视 ref 定义的对象类型数据在 Vue 3 中,watch 不仅可以监视 ref 定义的基本类型数据,还可以监视 ref 定义的对象类型数据。监视对象类型数据时,watch 的行为会有所不同,需要特别注意。接下来,我们将详细学习如何使用 watch 监视对象类型数据,并理解其背后的原理。一、监视 ref 定义的对象类型数据(一)问题描述ref 定义的对象类型...

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

在 Vue 3 中,watch 不仅可以监视 ref 定义的基本类型数据,还可以监视 ref 定义的对象类型数据。监视对象类型数据时,watch 的行为会有所不同,需要特别注意。接下来,我们将详细学习如何使用 watch 监视对象类型数据,并理解其背后的原理。

一、监视 ref 定义的对象类型数据

(一)问题描述

ref 定义的对象类型数据可以包含多个属性,例如 nameage。监视对象类型数据时,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>

(三)解释

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

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

  3. 修改整个对象:通过 changePerson 方法修改整个对象。

  4. 监视对象:使用 watch 监视 person,并开启深度监视(deep: true)。

如果不开启深度监视的话,对象的属性发生变化监视不到

(四)运行效果

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

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

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

  • 控制台会打印 newValueoldValue

二、watch 的行为

(一)默认行为

默认情况下,watch 只会监视对象的引用(地址值)。如果对象内部的属性发生变化,watch 不会触发回调函数。

(二)深度监视

通过设置 deep: true,可以监视对象内部的属性变化。开启深度监视后,watch 会监视对象的所有嵌套属性。

(三)newValueoldValue

  • newValue:变化后的值。

  • oldValue:变化前的值。

(四)特殊情况

  • 如果修改的是对象内部的属性(如 person.nameperson.age),newValueoldValue 会是同一个对象。

  • 如果修改的是整个对象(如 person.value = { ... }),newValueoldValue 会是不同的对象。

(五)示例代码

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

  • 控制台会打印 newValueoldValue

三、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 可以监视以下四种数据:

  1. ref 定义的数据

  2. reactive 定义的数据

  3. 函数返回的值

  4. 上述内容组成的数组

(三)监视对象类型数据

  • 默认行为:监视对象的引用(地址值)。

  • 深度监视:通过设置 deep: true,可以监视对象内部的属性变化。

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

(四)配置项

  • deep:开启深度监视。

  • immediate:立即执行回调函数。

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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