📌 前言
在 Vue.js 的世界中，"数据驱动"是其核心理念之一。而在这一理念下，watch 扮演着一个非常关键的角色。它允许我们监听响应式数据的变化，并在其发生变化时执行特定的业务逻辑。
本文将通过实际代码示例，深入讲解 Vue 3 中 watch 的使用方法和适用场景，帮助你更好地理解和掌握这一重要功能。
🔍 一、watch 的基本作用
watch 的主要作用是监视响应式数据的变化。当被监视的数据发生变更时，Vue 会自动调用我们定义的回调函数，从而实现对变化做出响应。
这在处理复杂状态变化、异步操作、表单联动等场景中尤为有用。
⚙️ 二、Vue 3 中 watch 的特点
相比 Vue 2，Vue 3 中的 watch 在语法和行为上有一些显著区别：
✅ 可监视的四种类型：
- 由
ref定义的数据 - 由
reactive定义的对象 - 返回值的 getter 函数（如
() => person.name） - 包含上述任意类型的数组
🔍 深度监视（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] = newValues
const [oldName, oldCar] = oldValues
console.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 的理解与运用。