如何手动停止 Vue3 的监听器？教你手动销毁副作用防止内存泄漏-Vue.js-PHP中文网

vue 3 的 watch 和 watcheffect 均返回可调用的 stop 函数以终止监听，防止内存泄漏；非组件内需显式调用，推荐结合 onunmounted 清理；vue 3.5+ 支持 pause/resume 暂停恢复监听；watcheffect 还支持 oninvalidate 清理异步副作用。

如何手动停止 vue3 的监听器？教你手动销毁副作用防止内存泄漏

Vue 3 的 watch 和 watchEffect 都会返回一个 stop 函数，调用它就能立刻终止监听。这是防止内存泄漏最直接、最可靠的方式——尤其在非组件作用域（比如自定义 Hook、工具函数或服务层）中，不手动清理容易让响应式依赖长期驻留内存。

拿到并调用 stop 函数

所有通过 watch 或 watchEffect 创建的监听器，只要不是在组件 setup() 中直接调用（此时 Vue 会自动卸载清理），都建议显式保存并调用返回的 stop：

基础写法：把监听器赋值给变量，后续按需调用

const stop = watch(count, (val) => { console.log(val) })<br>stop() // 立即停止

条件触发停止：在回调内部调用 stop，实现“一次性监听”或阈值控制
const stop = watch(count, (val) => { if (val >= 10) { stop() } })
注意：不能在回调外层直接写 stop()，否则监听器还没建立就执行了；必须确保 stop 是在监听已启动后才被调用。