vue 3 侦听器清理核心是及时中断异步操作，watcheffect 用 oninvalidate 清理本轮定时器/请求，watch 返回 stop 需主动调用，复杂场景用 effectscope 统一管理，非响应式资源须手动清理。
Vue 3 中侦听器的副作用清理，核心是“及时中断未完成的异步操作或中间状态”，而不是等组件卸载才处理。关键不在数据本身，而在回调中启动的定时器、请求、事件监听等外部资源。
watchEffect 里用 onInvalidate 清理本轮操作
这是最常用也最精准的方式。每次新响应触发前，上一轮的 onInvalidate 会自动执行，适合防抖、取消请求、清除定时器：
- 写法：在 watchEffect 回调参数中接收 onInvalidate，并在其中注册清理函数
- 示例：搜索输入防抖时，每次新输入都清掉上一次的 setTimeout
- 注意：onInvalidate 只清理“当前这一轮”，不影响后续新触发的逻辑，轻量且安全
watch 返回的 stop 函数要主动调用
watch 和 watchEffect 都返回一个可执行的 stop 函数，调用它就能立刻终止监听。这不是可选项，而是必要动作：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 非组件内使用（如工具函数、自定义 Hook）必须显式保存并调用 stop
- 组件内也建议配合 onBeforeUnmount 调用，确保在响应式系统停止追踪前完成清理
- 错误做法：只声明 watch，却不调用 stop；或把 stop 放在 onUnmounted（已晚一步，可能引发更新警告）
复杂场景用 effectScope 统一管理
当一个逻辑块里包含多个 watch、watchEffect、computed 或异步副作用时，手动逐个 stop 容易遗漏。effectScope 提供容器级控制：
- 用 effectScope() 创建作用域，所有副作用在 scope.run(() => { ... }) 中注册
- 调用 scope.stop() 一次性清理内部全部响应式依赖和清理函数
- 特别适合封装可复用的组合式函数（如 usePolling、useWebSocket），避免跨组件泄漏
别忘了清理非响应式资源
响应式系统不会帮你管 setTimeout、addEventListener、fetch、第三方实例这些——它们才是内存泄漏主力：
- 定时器：clearTimeout / clearInterval，句柄必须存在且有效
- 请求：用 AbortController，把 signal 传给 fetch，并在 onInvalidate 或 onBeforeUnmount 中调用 abort()
- 图表/地图库：调用 dispose()、remove()、destroy() 等明确提供的销毁方法
- 全局事件：window.removeEventListener、document.removeEventListener，确保监听器引用一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
