vue3 watch监听事件

### Vue3 中 `watch` 监听事件的用法

在 Vue3 中，`watch` 提供了一种强大的机制用于监听特定的数据源，并在其发生变化时执行回调函数。此特性对于处理异步操作、复杂的状态逻辑以及副作用管理尤为有用。

#### 基本语法结构

当使用组合 API (`setup`) 时，可以通过如下方式引入并配置 `watch`：

import { watch } from 'vue';

// 单个数据源监听
watch(source, (newValue, oldValue) => {
    // 执行某些动作...
}, options);

这里的 `source` 可以是一个返回值为响应式的 getter 函数或者是直接传入由 `ref()` 或者 `reactive()` 创建的对象/属性[^1]。

#### 实际应用场景下的实现方法

##### 方法一：监听单一的基础类型变量（如数字、字符串）

如果目标是监控简单的基础类型的改变，则可以直接传递该引用给 `watch`:

import { ref, watch } from 'vue';
let count = ref(0);

watch(count, (newVal, oldVal) => {
    console.log(`count changed from ${oldVal} to ${newVal}`);
});

##### 方法二：同时监听多个基础类型变量

为了跟踪多个独立的基础类型的变化情况，可以利用数组的形式一次性指定所有的观察对象：

import { ref, watch } from 'vue';
const userAge = ref(25);
const userName = ref('Alice');

watch([userAge, userName], ([newAge, newName], [prevAge, prevName]) => {
    console.log(`${prevName}'s age was updated from ${prevAge} to ${newAge}.`);
});

##### 方法三：监听整个反应式对象内的所有变动

针对复杂的嵌套结构或是想要捕捉到任何内部成员变更的情况，应该采用 `reactive` 定义的对象作为参数：

import { reactive, watch } from 'vue';
const userProfile = reactive({
    firstName: '',
    lastName : ''
});

watch(userProfile, () => {
    console.log('User profile has been modified.');
},{ deep: true });

注意这里设置了 `{deep:true}` 来确保能够深入检测到深层级属性的变化[^2]。

##### 方法四：仅关注对象内特定字段的变化

有时只需要关心某个具体键位上的更新而忽略其他部分；此时可以在调用 `watch` 的时候提供一个计算属性来限定范围：

import { computed, reactive, watch } from 'vue';
const bookInfo = reactive({
    title: "",
    author: ""
});

watch(() => bookInfo.title, (title) => {
    console.log(`Book Title Changed To "${title}"`);
});

以上就是关于如何在 Vue3 应用程序里运用 `watch` 进行不同层次上数据变化监测的一些常见模式和技巧[^3]。