onunmounted 是 vue 组合式 api 中组件卸载前清理资源的核心钩子，需显式导入并调用，用于清除定时器、全局事件监听、未完成请求及第三方库实例；搭配 watcheffect 的 oninvalidate 或 effectscope 可提升清理可靠性。
onUnmounted 是 Vue 组合式 API 中处理组件卸载前资源清理的核心钩子，它在组件从 DOM 移除、但实例仍完整可用时执行——这是清理定时器、事件监听、请求和第三方库的最后安全时机。
onUnmounted 的基本用法
它必须从 vue 显式导入，在 setup 或 <script setup> 中调用：</script>
- 直接传入一个清理函数：onUnmounted(() => { clearTimeout(timer); })
- 支持多次调用，所有注册的回调都会按顺序执行
- 函数内可安全访问 ref、computed、watch 副作用等响应式状态
哪些资源必须手动清理
Vue 不会自动管理非响应式副作用，以下类型需显式处理：
- 定时器：setInterval / setTimeout —— 必须配对 clearTimeout / clearInterval
- 全局事件监听：window.addEventListener('resize', handler)，需用同一函数引用调用 removeEventListener
- 未完成的网络请求：使用 AbortController 发起 fetch，卸载前调用 controller.abort()
- 第三方库实例：ECharts 要调用 chart.dispose()，Mapbox 要调用 map.remove()，IntersectionObserver 要调用 observer.disconnect()
搭配 watchEffect 的 onInvalidate 更精准控制
当清理逻辑与响应式依赖强关联时（比如防抖、轮询），watchEffect 内置的 onInvalidate 更可靠：
- 每次新副作用运行前，上一次的 onInvalidate 自动触发（包括组件卸载时）
- 适合清理 pending 的 fetch、待执行的 setTimeout、临时绑定的 DOM 事件
- 示例：watchEffect(onInvalidate => { const id = setTimeout(...); onInvalidate(() => clearTimeout(id)); })
用 effectScope 管理复杂组合逻辑
对于封装成 composable 的功能（如 useWebSocket、usePolling），effectScope 可避免漏写 onUnmounted：
- 创建作用域：const scope = effectScope()
- 在 scope 内运行所有副作用：scope.run(() => { watch(...); setInterval(...); })
- 统一销毁：onUnmounted(() => scope.stop())
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
