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

深色版本

<template><div class="person"><h1>情况五：同时监视多个数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改第一台车</button><button @click="changeC2">修改第二台车</button><button @click="changeCar">替换整个车对象</button></div>
</template>

📄 脚本部分（script setup）

ts

深色版本

<script lang="ts" setup name="Person_watch">
import { reactive, watch } from 'vue'// 定义响应式数据
let person = reactive({name: '张三',age: 18,car: {c1: '奔驰',c2: '宝马'}
})// 修改方法
function changeName() {person.name += '~'
}function changeAge() {person.age += 1
}function changeC1() {person.car.c1 = '奥迪'
}function changeC2() {person.car.c2 = '大众'
}function changeCar() {person.car = { c1: '雅迪', c2: '爱玛' }
}// 使用 watch 同时监听 name 和 car
watch([() => person.name, () => person.car],(newValues, oldValues) => {const [newName, newCar] = newValuesconst [oldName, oldCar] = oldValuesconsole.log('数据变化了')console.log('新值:', newName, newCar)console.log('旧值:', oldName, oldCar)},{ deep: true }
)
</script>

 

📝 说明：

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

---

🧭 五、总结

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

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

---

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