Vue3 新特性：原来watch 也能“暂停”和“恢复”了！

作者：程序员成长指北原文；mp.weixin.qq.com/s/vo2tYOvhv...

watch 是 Vue 响应式体系中的核心工具，很多人用了一两年，却不知道它在 Vue 3.5 中悄悄变得更强大了。

这一次，我们可以暂停、恢复、指定监听深度 ，甚至可以更优雅地清理副作用。

如果你还不知道这些新特性，那这篇文章就是为你准备的。

watch 新增 `pause` 和 `resume`

在 Vue 3.5 之前，watch 一旦创建，只有一种选择：要么持续监听，要么彻底停止 。

但现实场景远比这复杂------有时我们希望临时关闭监听，稍后再恢复。

现在，Vue 3.5 给 watch 增加了更灵活的控制：

scss 复制代码

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，帮我们把清理和副作用代码绑定在一起，让代码更简洁、直观：

scss 复制代码

import { watch, onWatcherCleanup } from 'vue'

watch(id, (newId) => {
  const { cancel } = doSomethingAsync(newId)

  onWatcherCleanup(() => {
    cancel()
  })
})

好处

清理更及时：每次响应式值变化，自动调用上次的清理函数
更安全：不怕漏掉取消请求、移除事件等步骤

watch 支持精确定义监听深度

过去 deep: true 是监听复杂对象变化的唯一方式，但它往往性能开销较大。

Vue 3.5 新增了一个细粒度控制：直接指定监听的深度。

javascript 复制代码

watch(obj, (newVal, oldVal) => {
  console.log('变化了')
}, {
  deep: 2 // 只递归到第2层
})

应用价值

精准监听需要关心的层级
降低大对象监听的性能负担

写在最后

Vue 3.5 给 watch 带来的这些升级，不是"炫技"，而是源于对实际开发痛点的洞察：

我们需要更灵活的监听时机
我们需要更安全简洁的副作用清理
我们需要性能更好的深度监听

掌握这些新特性，你的 Vue 应用会更高效、可维护、优雅。