作者：程序员成长指北 原文；mp.weixin.qq.com/s/vo2tYOvhv…
watch 是 Vue 响应式体系中的核心工具，很多人用了一两年，却不知道它在 Vue 3.5 中悄悄变得更强大了。
这一次，我们可以暂停、恢复、指定监听深度，甚至可以更优雅地清理副作用。
如果你还不知道这些新特性，那这篇文章就是为你准备的。
watch 新增 pause 和 resume
在 Vue 3.5 之前，watch 一旦创建，只有一种选择：要么持续监听，要么彻底停止。
但现实场景远比这复杂——有时我们希望临时关闭监听，稍后再恢复。
现在，Vue 3.5 给 watch 增加了更灵活的控制：
import { watch } from'vue'
const { pause, resume, stop } = watch(source, (newVal, oldVal) => {
console.log('数据变化:', newVal)
})
// 暂停监听
pause()
// 恢复监听
resume()
// 永久停止
stop()
典型应用场景
- 编辑表单时暂停监听，防止用户输入过程中触发无用计算或 API 请求
- 大批量修改数据时统一处理，避免过多的中间状态更新
onWatcherCleanup — 清理副作用
以前我们经常需要在 onBeforeUnmount 或者 watch 的回调里手动清理异步任务，写起来很啰嗦。
Vue 3.5 推出的 onWatcherCleanup，帮我们把清理和副作用代码绑定在一起，让代码更简洁、直观：
import { watch, onWatcherCleanup } from 'vue'
watch(id, (newId) => {
const { cancel } = doSomethingAsync(newId)
onWatcherCleanup(() => {
cancel()
})
})
好处
- 清理更及时：每次响应式值变化，自动调用上次的清理函数
- 更安全：不怕漏掉取消请求、移除事件等步骤
watch 支持精确定义监听深度
过去 deep: true 是监听复杂对象变化的唯一方式，但它往往性能开销较大。
Vue 3.5 新增了一个细粒度控制：直接指定监听的深度。
watch(obj, (newVal, oldVal) => {
console.log('变化了')
}, {
deep: 2 // 只递归到第2层
})
应用价值
- 精准监听需要关心的层级
- 降低大对象监听的性能负担
写在最后
Vue 3.5 给 watch 带来的这些升级，不是“炫技”，而是源于对实际开发痛点的洞察：
- 我们需要更灵活的监听时机
- 我们需要更安全简洁的副作用清理
- 我们需要性能更好的深度监听
掌握这些新特性，你的 Vue 应用会更高效、可维护、优雅。
