Vue 组合式生命周期如何使用 onUnmounted 处理组件卸载前的资源清理

onUnmounted 是 Vue 组合式 API 中组件卸载前清理资源的核心钩子，需显式导入并调用，用于清除定时器、全局事件监听、未完成请求及第三方库实例；搭配 watchEffect 的 onInvalidate 或 effectScope 可提升清理可靠性。

onUnmounted 是 Vue 组合式 API 中处理组件卸载前资源清理的核心钩子，它在组件从 DOM 移除、但实例仍完整可用时执行——这是清理定时器、事件监听、请求和第三方库的最后安全时机。

onUnmounted 的基本用法

它必须从 vue 显式导入，在 setup 或 中调用：

1. 直接传入一个清理函数：onUnmounted(() => { clearTimeout(timer); })
2. 支持多次调用，所有注册的回调都会按顺序执行
3. 函数内可安全访问 ref、computed、watch 副作用等响应式状态

哪些资源必须手动清理

Vue 不会自动管理非响应式副作用，以下类型需显式处理：

1. 定时器：setInterval / setTimeout —— 必须配对 clearTimeout / clearInterval
2. 全局事件监听：window.addEventListener('resize', handler)，需用同一函数引用调用 removeEventListener
3. 未完成的网络请求：使用 AbortController 发起 fetch，卸载前调用 controller.abort()
4. 第三方库实例：ECharts 要调用 chart.dispose()，Mapbox 要调用 map.remove()，IntersectionObserver 要调用 observer.disconnect()

搭配 watchEffect 的 onInvalidate 更精准控制

当清理逻辑与响应式依赖强关联时（比如防抖、轮询），watchEffect 内置的 onInvalidate 更可靠：

1. 每次新副作用运行前，上一次的 onInvalidate 自动触发（包括组件卸载时）
2. 适合清理 pending 的 fetch、待执行的 setTimeout、临时绑定的 DOM 事件
3. 示例：watchEffect(onInvalidate => { const id = setTimeout(...); onInvalidate(() => clearTimeout(id)); })

用 effectScope 管理复杂组合逻辑

对于封装成 composable 的功能（如 useWebSocket、usePolling），effectScope 可避免漏写 onUnmounted：

1. 创建作用域：const scope = effectScope()
2. 在 scope 内运行所有副作用：scope.run(() => { watch(...); setInterval(...); })
3. 统一销毁：onUnmounted(() => scope.stop())

不复杂但容易忽略