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

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

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

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

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


watch 新增 pauseresume

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

相关推荐
Pedantic2 分钟前
SwiftUI 按钮Button:完整教程
前端
玩个冰球4 分钟前
Stata 18下载安装教程(非常详细),看完这一篇就够了(附安装包)
github
前端拿破轮4 分钟前
2025年了,你还不知道怎么在vscode中直接调试TypeScript文件?
前端·typescript·visual studio code
代码的余温6 分钟前
DOM元素添加技巧全解析
前端
JSON_L9 分钟前
Vue 电影导航组件
前端·javascript·vue.js
Xi_Xu12 分钟前
Xget:下一代开源资源获取加速引擎,让你的文件下载、储存库克隆和镜像拉取快如闪电
开源·github
用户214118326360217 分钟前
01-开源版COZE-字节 Coze Studio 重磅开源!保姆级本地安装教程,手把手带你体验
前端
大模型真好玩31 分钟前
深入浅出LangChain AI Agent智能体开发教程(四)—LangChain记忆存储与多轮对话机器人搭建
前端·人工智能·python
帅夫帅夫1 小时前
深入理解 JWT:结构、原理与安全隐患全解析
前端
Struggler2811 小时前
google插件开发:如何开启特定标签页的sidePanel
前端