Vue3.5+ 版本中，Watch 的 3 种最新使用方式！
点击下方“前端开发爱好者”，选择“设为星标”
第一时间关注技术干货！
大家好，我是
xy👨🏻💻。Vue 3.5 版本中，我认为变化最大的可能就是watch！
Vue 3.5 版本带来了一系列令人兴奋的新特性，其中对 watch 功能的增强尤为引人注目。
这些改进不仅提升了开发效率，还使得响应式数据的监控更加灵活和强大。
让我们一起来看看这些变化，并探讨它们如何帮助我们更好地构建 Vue 应用。
onWatcherCleanup：简化清理逻辑
在 Vue 3.5 之前，我们经常需要在 watch 和 onBeforeUnmount 生命周期钩子中重复编写清理逻辑，这不仅增加了代码的冗余，也使得代码的维护变得更加困难。
Vue 3.5 引入了 onWatcherCleanup 函数，它允许我们在 watch 内部直接指定清理逻辑，从而简化了代码。
import { watch, onWatcherCleanup } from 'vue'
watch(id, (newId) => {
const { response, cancel } = doAsyncWork(newId)
// 如果 `id` 变化，则调用 `cancel`，
// 如果之前的请求未完成，则取消该请求
onWatcherCleanup(cancel)
})
这种方式不仅减少了代码的重复，也使得清理逻辑更加集中和清晰。
Watch 返回值增强：更细粒度的控制
Vue 3.5 还增强了 watch 函数的返回值。现在，watch 返回的对象不仅包含停止监视的 stop 方法，还增加了 pause 和 resume 方法，允许我们更细粒度地控制监视器的行为。
const { pause, resume, stop } = watch(source, (newVal, oldVal) => {
// 监视逻辑
});
// 暂停监视
pause();
// 恢复监视
resume();
这种增强使得我们可以在需要时暂停监视，例如在编辑表单时暂停对数据的监控，以避免不必要的处理。
watch 指定深度：更精确的深度监听
在 Vue 3.5 之前，watch 的 deep 选项只能设置为 true 或 false，这在需要监听深层嵌套对象时可能会带来性能问题。
Vue 3.5 允许我们通过设置 deep 为整数来指定监听的深度，这样我们可以更精确地控制监听的范围。
watch(reactiveObject, (newVal, oldVal) => {
// 监听逻辑
}, { deep: 2 });
这种方式可以减少不必要的性能开销，特别是在处理大型或深层嵌套对象时。
结论
Vue 3.5 对 watch 功能的增强，使得我们能够以更灵活和高效的方式监控响应式数据。无论是通过 onWatcherCleanup 简化清理逻辑，还是通过增强的返回值和深度监听选项来更精确地控制监视行为，这些改进都极大地提升了我们的开发体验。
写在最后
公众号：前端开发爱好者专注分享web前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个赞👍 或者 ➕关注都是对我最大的支持。
欢迎长按图片加好友，我会第一时间和你分享前端行业趋势，面试资源，学习途径等等。
添加好友备注【进阶学习】拉你进技术交流群
关注公众号后，在首页：
- 回复 面试题，获取最新大厂面试资料。
- 回复 简历，获取 3200 套 简历模板。
- 回复 React 实战，获取 React 最新实战教程。
- 回复 Vue 实战，获取 Vue 最新实战教程。
- 回复 ts，获取 TypeScript 精讲课程。
- 回复 vite，获取 Vite 精讲课程。
- 回复 uniapp，获取 uniapp 精讲课程。
- 回复 js 书籍，获取 js 进阶 必看书籍。
- 回复 Node，获取 Nodejs+koa2 实战教程。
- 回复 数据结构算法，获取数据结构算法教程。
- 回复 架构师，获取 架构师学习资源教程。
- 更多教程资源应有尽有，欢迎 关注获取。