Vue 3 中的 watch:监视多个数据

举报
周杰伦本人 发表于 2025/01/22 14:42:14 2025/01/22
【摘要】 Vue 3 中的 watch:监视多个数据在 Vue 3 中,watch 不仅可以监视单个数据,还可以同时监视多个数据。监视多个数据时,可以将这些数据放在一个数组中,并通过 watch 来统一管理。接下来,我们将详细学习如何使用 watch 监视多个数据,并理解其背后的原理。一、监视多个数据(一)问题描述在实际开发中,有时需要同时监视多个数据的变化。例如,监视一个人的名字和第一台车的变化。w...

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>

(三)解释

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

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

  3. 监视多个数据

  • 使用 watch 监视 person.nameperson.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函数来说,在真正开发的过程中,监视最多的就是基本数据类型和对象类型的属性的值的变化了。

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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