Vue监听器必须手动停止，Vue 2中$watch返回函数需在beforeDestroy调用，Vue 3中watch/watchEffect返回的stop函数须在onBeforeUnmount中调用，深度监听、once模式及路由监听均不改变手动清理本质。
Vue 监听器不会自动停止，必须主动管理。重点不是“能不能停”，而是“什么时候停、怎么停才安全”。手动销毁的核心是拿到停止函数，并在合适时机调用它——否则容易引发内存泄漏或回调误执行。
Vue 2 中通过 $watch 创建的监听器
只有 this.$watch() 返回的函数能手动取消，watch 选项里写的监听器 Vue 会自动清理，无需干预。
- 在 created 或 mounted 中调用 this.$watch，保存返回值（如
this.unwatch = this.$watch(...)） - 在 beforeDestroy（Vue 2）中调用该函数：
this.unwatch() - 多个监听时建议用数组统一管理：
this.unwatches = [this.$watch(...), this.$watch(...)]，销毁时遍历调用
Vue 3 组合式 API 的 watch 和 watchEffect
组合式 API 中所有 watch() 和 watchEffect() 都返回停止函数，且不会自动清理，必须手动处理。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 在 setup 或
<script setup></script>中接收并保存停止函数：const stop = watch(...) - 推荐在 onBeforeUnmount 钩子中调用：
onBeforeUnmount(() => stop()) - watchEffect 同理：
const stop = watchEffect(...)，同样需显式调用 - 支持条件性自动停止：在回调内直接调用 stop()，例如达到某数值后不再监听
深度监听与一次性监听的注意事项
deep: true 会显著增加性能开销，once: true 可避免重复触发，但两者都不改变“需手动停止”的本质。
- 深层监听对象时，确保 stop() 调用后整个依赖链被释放
- 使用 once: true 并不等于免管理——它只控制回调执行次数，停止函数仍需调用以解除响应式依赖
- 监听路由、$route.params 等动态路径时，尤其要防止组件卸载后回调还在执行（比如发起已无意义的 API 请求）
常见遗漏点和防御性写法
实际项目中，最容易出问题的是“以为自动清了，其实没清”或“清早了，导致监听失效”。
- 不要在 setup 里直接调用 stop()——它会在组件挂载前就终止监听
- 避免在异步回调中调用 stop() 前未做存在性判断（如
if (stop) stop()） - watch 监听 ref 时，传入的是 ref 本身，不是 ref.value；监听普通属性名字符串（Vue 2）则不能用于 computed 或嵌套字段
- 若监听逻辑复杂，可封装一个 useWatch 工具函数，内部自动绑定 onBeforeUnmount
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
