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

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 应用会更高效、可维护、优雅。

# 加入我们