Vue 3 的 watch 和 watchEffect 均返回可调用的 stop 函数以手动停止监听，防止内存泄漏；非组件内需显式调用，推荐结合 onUnmounted 清理；Vue 3.5+ 支持 pause/resume 暂停恢复；watchEffect 可用 onInvalidate 实现副作用清理。
Vue 3 的 watch 和 watchEffect 都会返回一个停止函数，调用它就能立即终止监听，这是防止内存泄漏最直接、最可靠的方式。尤其在非组件作用域（如自定义 Hook、工具函数或服务层）中，不手动清理容易导致响应式依赖长期驻留内存。
用 stop 函数手动取消监听
所有通过 watch 或 watchEffect 创建的侦听器，只要不是在组件 setup() 中直接调用（此时 Vue 会自动卸载清理），都建议显式保存并调用返回的 stop 函数：
- 基础写法：把监听器赋值给变量，后续按需调用
const stop = watch(count, (val) => { console.log(val) })
stop() // 立即停止
-
条件触发停止：在回调内部调用
stop，实现“一次性监听”或阈值控制
const stop = watch(count, (val) => {
if (val >= 10) {
stop()
}
})
立即学习“前端免费学习笔记（深入）”；
-
注意点：不能在回调外层直接写
stop()，否则监听器还没建立就执行了；必须确保stop是在监听已启动后才被调用。
在组件生命周期中自动清理
即使 Vue 会在组件卸载时自动清理 watch，但为保持逻辑清晰和兼容性（比如配合 watchEffect 或第三方库），推荐主动绑定到生命周期钩子：
- 使用
onUnmounted（推荐）：组件真正从 DOM 移除时执行清理
import { onUnmounted } from 'vue'
const stop = watch(data, handler)
onUnmounted(() => stop())
- 使用
onBeforeUnmount：适合需要在卸载前同步释放资源（如取消请求、清除定时器）的场景 - 避免只依赖自动清理：当监听源来自全局状态、composable 外部或跨组件共享时，自动清理可能不生效。
高级控制：暂停与恢复（Vue 3.5+）
如果只是临时禁用监听，而非彻底销毁，Vue 3.5 起支持 pause / resume —— 它们不会丢弃状态，恢复时还会补发最后一次变化值：
- 暂停监听：数据照常更新，但回调不执行
- 恢复监听：立即以最新值触发一次回调，无需重建监听器
const { pause, resume } = watch(searchText, (val) => {
fetchSuggestions(val)
})
pause() // 暂停搜索监听
resume() // 恢复，自动用当前 searchText 触发
- 适用场景：表单输入防抖中途暂停、加载中冻结 UI 响应、多步骤流程的状态冻结等。
watchEffect 的特殊清理方式
watchEffect 支持更细粒度的副作用管理，尤其适合异步或带中间状态的操作：
- 利用
onInvalidate注册清理函数，它会在下一次副作用执行前或监听器停止时自动调用
watchEffect((onInvalidate) => {
const timer = setTimeout(() => { /* 请求 */ }, 300)
onInvalidate(() => clearTimeout(timer)) // 输入变化或 stop 时清理
})
- 搭配
onStop选项，可在监听器被明确停止时执行收尾逻辑（如上报埋点、关闭连接）
watch(data, handler, {
onStop: () => console.log('监听器已终止')
})
