Vue3中的watch监听

最新推荐文章于 2025-04-23 14:27:57 发布

Zeng　

最新推荐文章于 2025-04-23 14:27:57 发布

阅读量9.9k

点赞数 8

文章标签： 1024程序员节

ZYing

本文链接：https://blog.youkuaiyun.com/sjajjajusja/article/details/127502217

版权

本文深入探讨Vue.js中如何监听ref和reactive类型的数据变化，包括单个属性、多个属性以及整个对象的监听。同时，介绍了watchEffect的使用，它会在依赖的属性变化时自动更新。通过实例代码展示了如何在模板中绑定数据并监听其变化，帮助理解Vue的响应式系统。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、监听基础ref类型

1、监听单个ref数据

在这里插入图片描述

2、监听多个ref数据

在这里插入图片描述

二、监听reactive类型

1、监听对象中单个属性

监听 user.more.iPhone 属性，那么只有当iPhone属性发生变更时，才会触发 watch 方法，其他属性变更不会触发 watch 方法。注意，此时的第一个参数是一个箭头函数。

在这里插入图片描述

2、监听对象中多个属性

在这里插入图片描述

3、同时监听ref基本类型数据和reactive对象中的属性

在这里插入图片描述

4、监听整个对象

当监听整个对象时，只要这个对象有任何修改，那么就会触发 watch 方法。无论是其子属性变更（如 user.name），还是孙属性变更（如 user.more.iPhone）…，都是会触发 watch 方法的。

在这里插入图片描述

5、监听对象中值为对象的属性

方式1：不用箭头函数，则可以不用deep:true

在这里插入图片描述

方式二：用箭头函数时，则必须加上{deep:true}才能触发监听
在这里插入图片描述

三、watchEffect

不用指明监视哪个属性,监视的回调用到哪个属性，就去监视哪个属性

watch可以访问新值和旧值，watchEffect不能访问。
watch需要指明监听的对象，也需要指明监听的回调。
watchEffect不用指明监视哪一个属性,监视的回调函数中用到哪个属性,就监视哪个属性。
watch只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行。

<template>
  <div>nums:<input v-model="nums" /></div>
  <div>user.age:<input v-model="user.age" /></div>
  <button @click="user.more.iPhone = 22222">改变more</button>
</template>
<script setup>
const nums = ref(1);
 
const user = reactive({
  name: "张三",
  age: 23,
  more: {
    iPhone: 1111,
    address: "aaa",
  },
});
watchEffect(() => {
  const x1 = nums.value;
  const x2 = user.age;
  const x3 = user.more.iPhone;
 
  console.log("watchEffect监听的回调执行了...");
});
watchEffect(() => {
  console.log("222222222...");
});
</script>