Vue前端篇——Vue 3的watch深度解析

前言

在 Vue.js 的世界中，“数据驱动”是其核心理念之一。而在这一理念下，watch 扮演着一个非常关键的角色。它允许我们监听响应式数据的变化，并在其发生变化时执行特定的业务逻辑。

本文将通过实际代码示例，深入讲解 Vue 3 中 watch 的使用方法和适用场景，帮助你更好地理解和掌握这一重要功能。

---

一、watch 的基本作用

watch 的主要作用是监视响应式数据的变化。当被监视的数据发生变更时，Vue 会自动调用我们定义的回调函数，从而实现对变化做出响应。

这在处理复杂状态变化、异步操作、表单联动等场景中尤为有用。

---

⚙️ 二、Vue 3 中 watch 的特点

相比 Vue 2，Vue 3 中的 watch 在语法和行为上有一些显著区别：

✅ 可监视的四种类型：

1. 由 ref 定义的数据
2. 由 reactive 定义的对象
3. 返回值的 getter 函数（如 () => person.name）
4. 包含上述任意类型的数组

深度监视（deep）

默认情况下，watch 不会深度监听对象内部属性的变化。如果需要监听嵌套对象或数组的变化，可以设置选项 { deep: true }。

例如：

ts

深色版本

watch(() => person.car, (newVal, oldVal) => {
  // ...
}, { deep: true })

---

三、实际应用场景

watch 在开发中有着广泛的应用，以下是一些常见的使用场景：

✅ 表单验证

当用户输入发生变化时，使用 watch 监听输入框的值并进行实时校验。

✅ 数据联动

当某个数据变化后，需要更新其他相关数据，例如选择省份后动态加载城市列表。

✅ 异步请求控制

当某个参数发生变化时，触发异步请求获取新数据并更新页面内容。

---

四、代码示例解析

下面是一个完整的示例，展示如何使用 watch 来监听多个响应式数据的变化。

模板部分（template）

vue

深色版本

脚本部分（script setup）

ts

深色版本

 

说明：

• 我们使用 reactive 创建了一个响应式对象 person。
• 通过 watch 同时监听 name 和 car 属性。
• 使用数组形式传入多个监听源，配合解构赋值输出新旧值。
• 设置 { deep: true } 实现对 car 对象内部属性变化的监听。
• 当点击按钮修改任意一个属性时，都会触发 watch 的回调函数。

---

五、总结

Vue 3 中的 watch 是一个强大而灵活的工具，能够让我们精准地捕捉到响应式数据的变化，并根据这些变化执行相应的操作。

合理使用 watch，不仅能提升代码的可维护性，还能有效支持复杂的业务逻辑。但需要注意的是，watch 更适合处理“副作用”类操作，对于简单的计算属性推荐使用 computed。

---

建议实践： 尝试自己动手写一个包含多个 watch 场景的小型项目，比如一个带搜索过滤的商品列表页，加深对 watch 的理解与运用。