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

Vue 3 Watch 进阶指南：从基础进阶到 Vue 3.5 新特性全掌握

news 2026/5/12 3:27:49

在 Vue 3 开发中，watch 是我们处理副作用（如异步请求、DOM 操作、数据同步）的核心武器。随着 Vue 3.5 版本的发布，侦听器又迎来了一些非常实用的更新。本文将带你从零开始，深度拆解 watch 的所有高阶用法与避坑指南。

一、 Watch 的核心定义

watch 的本质是懒执行的副作用函数。它侦听一个或多个响应式数据源，当数据发生变化时执行回调。

为什么选 `watch` 而不是 `watchEffect`？

精确性：明确指定触发源，不会像 watchEffect 那样追踪每一个读取到的变量。
回溯性：可以访问变化前后的值（newValue 和 oldValue）。
可控性：默认不立即执行，只有数据变了才触发。

二、五种侦听源类型

在 Vue 3 中，watch 的第一个参数非常灵活：

import { ref, reactive, watch, computed } from 'vue'const count = ref(0)
const state = reactive({ name: 'Gemini', age: 1 })
const double = computed(() => count.value * 2)// 1. 直接侦听 Ref
watch(count, (v) => console.log('Ref 变了:', v))// 2. 侦听 Getter 函数 (最推荐，尤其是针对响应式对象的某个属性)
watch(() => state.age, (v) => console.log('年龄变了:', v))// 3. 侦听 Reactive 对象 (默认强制开启深度监听)
watch(state, (v) => console.log('State 变了'))// 4. 侦听计算属性
watch(double, (v) => console.log('计算属性变了:', v))// 5. 侦听多个源 (数组形式)
watch([count, () => state.name], ([newCount, newName]) => {console.log('组合监听:', newCount, newName)
})

三、配置选项 (Options) 解析

watch 的第三个参数是一个对象，决定了侦听器的行为：

选项	类型	说明
`immediate`	`boolean`	是否立即触发一次（此时 `oldValue` 为 `undefined`）。
`deep`	`boolean / number`	是否深度遍历。Vue 3.5 后支持传入数字代表遍历层级。
`flush`	`'pre'	'post'
`once`	`boolean`	(Vue 3.4+) 仅触发一次，随后自动停止。

注意：侦听一个 reactive 对象时，deep 默认为 true。

四、核心避坑指南 (必读)

1. 为什么我的 oldValue 和 newValue 一模一样？

当你侦听一个引用类型（如对象或数组）时，newValue 和 oldValue 指向的是同一个引用。

解决办法：如果必须获取旧值的镜像，请在 Getter 中返回该对象的浅拷贝/深拷贝。

watch(() => ({...state}), (newVal, oldVal) => {console.log(newVal.age, oldVal.age) // 此时两者不同
})

2. 停止侦听器

在组件 setup 中声明的 watch 会随组件卸载自动停止。但如果你在异步回调（如 setTimeout）中创建了 watch，它会变成“孤儿”，导致内存泄漏。

解决办法：手动调用返回的停止函数。

const unwatch = watch(source, cb)
// 逻辑结束后
unwatch()

五、副作用清理：从 `onCleanup` 到 Vue 3.5 `onWatcherCleanup`

在侦听器中处理异步请求时，如果上一次请求还没结束，新请求又发起了，我们需要清理掉旧的请求。

传统写法 (3.5 以前)

watch(id, (newId, oldId, onCleanup) => {const controller = new AbortController()fetchData(newId, controller.signal)onCleanup(() => controller.abort()) // 下次执行前清理
})

Vue 3.5 最新写法

Vue 3.5 引入了全局导出的 onWatcherCleanup，它不仅可以在 watch 中使用，也能在 watchEffect 中使用，且不需要修改回调函数的参数签名。

import { watch, onWatcherCleanup } from 'vue'watch(id, (newId) => {const timer = setTimeout(() => {console.log('执行任务')}, 1000)// 更加优雅的清理方式onWatcherCleanup(() => clearTimeout(timer))
})

六、最佳实践建议

优先使用 Getter 函数：即便监听的是 Ref，使用 () => count.value 也能保持一致的代码风格，且能避免一些复杂的类型推导问题。
**谨慎使用 deep: true**：对于超大型对象，深度监听会带来明显的性能开销。
**善用 flush: 'post'**：如果你在回调里需要通过 ref 获取 DOM 元素的最新高度、宽度，记得开启这个选项。