Vue监听器必须手动停止，否则引发内存泄漏；Vue 2中通过this.$watch()创建的监听需在beforeDestroy调用返回函数，Vue 3中watch/watchEffect返回stop函数须在onUnmounted或onBeforeUnmount中显式调用。
Vue监听器不会自动停止，必须主动管理。重点不是“能不能停”，而是“什么时候停、怎么停才安全”。手动销毁的核心是拿到停止函数，并在合适时机调用它——否则容易引发内存泄漏或回调误执行。
Vue 2 中如何正确停止 $watch
只有通过 this.$watch() 创建的监听器才需要手动清理；watch 选项里写的监听器 Vue 会自动处理，无需干预。
- 在 created 或 mounted 中调用
this.$watch()，并保存返回值：例如this.unwatch = this.$watch('price', handler) - 在 beforeDestroy 钩子中调用该函数：
this.unwatch() - 多个监听时建议统一管理：用数组存所有 stop 函数，卸载前遍历调用，如
this.unwatches.forEach(fn => fn())
Vue 3 组合式 API 的 stop 必须显式调用
watch() 和 watchEffect() 都返回一个可执行的停止函数，且不会自动清理，哪怕在组件 setup 内定义也一样。
- 在 setup 或 <script setup></script> 中接收并保存停止函数：
const stop = watch(data, handler) - 推荐在 onUnmounted（组件真正移除 DOM 后）调用：
onUnmounted(() => stop()) - 若需同步释放资源（如取消请求、清定时器），可用 onBeforeUnmount
- 支持在回调内直接调用
stop()实现条件性终止，例如if (count.value >= 5) stop()
深度监听与一次性监听的常见误区
deep: true 和 once: true 不改变“需手动停止”的本质。
- 深层监听对象时，
stop()调用后才能真正释放整个依赖链 -
once: true只控制回调执行次数，响应式依赖依然存在，仍需调用stop()解除追踪 - 监听路由参数（如
$route.params.id）时，不手动清理会导致组件卸载后还发起无意义请求
防错写法与实战建议
实际项目中最容易出问题的是“以为自动清了，其实没清”或“清早了，导致监听失效”。
- 不要在 setup 顶层直接调用
stop()——监听器还没建立就终止了 - 异步回调中调用
stop()前务必做存在性判断：if (stop) stop() - 监听 ref 时传入的是
ref本身，不是ref.value；监听字符串字段（Vue 2）不能用于 computed 或嵌套属性 - 逻辑复杂时可封装
useWatch工具函数，内部自动绑定onBeforeUnmount
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
