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

news2025/6/9 5:11:21

📌 前言

在 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] = newValues
    const [oldName, oldCar] = oldValues

    console.log('数据变化了')
    console.log('新值:', newName, newCar)
    console.log('旧值:', oldName, oldCar)
  },
  { deep: true }
)
</script>