当前位置：首页 > article >正文

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

article 2025/8/4 0:23:33

📌 前言

在 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 }。

例如：

深色版本

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）

深色版本

<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>