Vue 3 的 watch 和 watchEffect 均返回可调用的 stop 函数以终止监听，防止内存泄漏；非组件内需显式调用，推荐结合 onUnmounted 清理；Vue 3.5+ 支持 pause/resume 暂停恢复监听；watchEffect 还支持 onInvalidate 清理异步副作用。
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是在监听已启动后才被调用。
在组件生命周期中自动清理
即使 Vue 会在组件卸载时自动清理 watch，但为保持逻辑清晰和兼容性（比如配合 watchEffect 或第三方库），推荐主动绑定到生命周期钩子：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 使用
onUnmounted（推荐）：组件真正从 DOM 移除时执行清理import { onUnmounted } from 'vue'<br>const stop = watch(data, handler)<br>onUnmounted(() => stop()) - 使用
onBeforeUnmount：适合需要在卸载前同步释放资源（如取消请求、清除定时器）的场景 - 避免只依赖自动清理：当监听源来自全局状态、composable 外部或跨组件共享时，自动清理可能不生效。
暂停与恢复监听（Vue 3.5+）
如果只是临时禁用监听，而非彻底销毁，Vue 3.5 起支持 pause/resume——它们不会丢弃状态，恢复时还会补发最后一次变化值：
立即学习“前端免费学习笔记（深入）”；
- 暂停监听：数据照常更新，但回调不执行
- 恢复监听：立即以最新值触发一次回调，无需重建监听器
const { pause, resume } = watch(searchText, (val) => { fetchSuggestions(val) })<br>pause() // 暂停搜索监听<br>resume() // 恢复，自动用当前 searchText 触发 - 适用场景：表单输入防抖中途暂停、加载中冻结 UI 响应、多步骤流程的状态冻结等。
watchEffect 的特殊清理方式
watchEffect 支持更细粒度的副作用管理，尤其适合异步或带中间状态的操作：
- 它返回的
stop函数调用后立即终止响应式追踪，且仅首次生效 - 可在 effect 内部调用
stop()实现“首次满足条件即退出”，例如：const stop = watchEffect(() => { if (dataLoaded.value) { stop() } }) - 还可配合
onInvalidate清理上一次未完成的异步操作（如取消 pending 请求）
