如何避免组件销毁时因未停止watch监听器导致的内存泄漏？

本文共计677个文字，预计阅读时间需要3分钟。

手动停止 +watch 监听器的核心，是获取到它的取消函数并在适当时机调用。Vue 会自动清理组件内同步创建的 watch，但如果一旦监听器脱离生命周期自动管理（如异步创建、在 composable 或 service 中使用），就必须自己负责销毁，否则可能导致内存泄漏。

Vue 3：拿到 stop 函数并主动调用

watch 函数返回一个可执行的 stop 函数，调用它即可立即终止监听：

• 监听 ref 或 reactive 数据时，直接赋值接收返回值：const stop = watch(() => count, cb)
• 监听响应式对象深层属性或数组变化，需加 { deep: true }，stop 行为不变
• 可在任意逻辑中触发停止，比如满足条件后：if (newVal >= 10) stop()
• 需要重新监听时，再次调用 watch 并覆盖原 stop 变量即可

Vue 2：仅 this.$watch 支持手动取消

Vue 2 的 options API 中，只有通过 this.$watch 动态创建的监听器才返回取消函数；而 watch: { } 写法无法获取该能力：

• 正确写法：const unwatch = this.$watch('count', handler)，之后调用 unwatch() 即可
• 建议把 unwatch 存到实例上（如 this.unwatchCount = unwatch），便于在 beforeDestroy 中统一清理
• 避免在 data、computed 或 methods 中重复调用 $watch，否则可能产生多个未注销监听器

必须手动清理的典型场景

这些情况 Vue 不会自动帮你 stop，漏掉就容易驻留内存：

• 在 onMounted + setTimeout / Promise.then 等异步回调中创建 watch
• 在自定义 Hook（composable）中创建 watch，且该 Hook 被多个组件复用或长期存在
• 在非组件上下文（如工具 service、全局状态管理模块）中独立使用 watch
• 监听了 window、document 等全局对象，同时又没配合 onUnmounted 清理事件绑定

配合生命周期，确保不遗漏

即使你拿到了 stop 函数，也得在组件卸载前调用它。不同版本写法略有差异：

• Vue 3 Composition API：onUnmounted(() => stop && stop())
• Vue 3 Options API：beforeUnmount() { stop?.() }
• Vue 2：beforeDestroy() { this.unwatchCount?.() }
• 若使用 keep-alive，注意用 deactivated 替代 unmounted 钩子