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

以上关于Vue3 新特性：watch 也能“暂停”和“恢复”了！的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。