如何在 Composables 中优雅地处理组件卸载时的资源清理？

在 Composables如 Vue Composition API 或 React Hooks中优雅处理组件卸载时的资源清理需结合框架生命周期机制和代码组织策略。以下是分步骤的最佳实践指南1. 明确清理场景资源类型定时器setInterval、事件监听addEventListener、DOM 引用ref、网络请求AbortController、第三方库实例如图表、动画、全局状态订阅如 Vuex/Pinia 监听、WebSocket 连接等。风险点内存泄漏、无效回调执行、状态污染、性能损耗。2. 框架原生生命周期钩子Vue 3 Composition API使用onUnmounted钩子注册清理函数import{onUnmounted}fromvue;consttimersetInterval((){...},1000);consthandler(){...};window.addEventListener(resize,handler);onUnmounted((){clearInterval(timer);window.removeEventListener(resize,handler);});React Hooks在useEffect中返回清理函数useEffect((){consttimersetInterval((){...},1000);consthandler(){...};window.addEventListener(resize,handler);// 清理函数组件卸载时执行return(){clearInterval(timer);window.removeEventListener(resize,handler);};},[]);// 空依赖数组确保仅运行一次3. 封装可复用清理逻辑自定义 HookReactfunctionuseInterval(callback,delay){useEffect((){consttimersetInterval(callback,delay);return()clearInterval(timer);// 清理函数},[callback,delay]);}使用useInterval(() {...}, 1000);Compose 函数VuefunctionuseTimer(callback,delay){consttimerref(null);conststart(){timer.valuesetInterval(callback,delay);};onUnmounted(()clearInterval(timer.value));return{start};}4. 处理异步操作与取消逻辑网络请求使用AbortController取消未完成的请求// Vue 示例import{onUnmounted}fromvue;constabortControllernewAbortController();fetch(url,{signal:abortController.signal}).catch(err{if(err.nameAbortError)console.log(请求已取消);});onUnmounted(()abortController.abort());Promise 清理对于长生命周期 Promise可维护一个标志变量在卸载时跳过结果处理letisMountedtrue;fetch(url).then(data{if(isMounted){/* 处理数据 */}});onUnmounted(()isMountedfalse);5. 第三方库资源管理图表库如 EChartsimport{onUnmounted}fromvue;import*asechartsfromecharts;constchartecharts.init(chartDom.value);onUnmounted(()chart.dispose());// 显式销毁实例动画库如 GSAPimport{gsap}fromgsap;consttweengsap.to(element,{...});onUnmounted(()tween.kill());// 终止动画6. 代码组织策略逻辑聚合将资源的创建和清理写在同一作用域如setup或useEffect避免分散。命名前缀清理函数使用clearXXX、disposeXXX命名便于识别。依赖追踪在 React 中确保useEffect依赖数组正确避免因闭包导致清理逻辑失效。TypeScript 类型为资源变量如定时器 ID、事件处理器添加类型声明减少错误。7. 调试与检测内存泄漏检测浏览器 DevToolsMemory 面板记录内存快照对比组件卸载前后的对象引用。严格模式React开发环境下组件挂载/卸载两次暴露未正确清理的资源。日志标记在清理函数中添加console.log确认执行如console.log(Unmount cleanup)。工具辅助使用 ESLint 插件如eslint-plugin-react检测未返回清理函数的useEffect。8. 特殊场景处理条件卸载在beforeUnmount/onUnmounted中根据条件执行清理如用户操作触发的提前卸载。子组件通信通过事件总线或状态管理通知子组件卸载触发其清理逻辑谨慎使用避免耦合。SSR 兼容在服务端渲染中跳过 DOM 操作和浏览器 API如window通过环境判断避免错误。总结示例Vue 3import{ref,onMounted,onUnmounted}fromvue;exportdefault{setup(){consttimerref(null);constsocketref(null);onMounted((){// 设置资源timer.valuesetInterval(()console.log(Tick),1000);socket.valuenewWebSocket(wss://example.com);socket.value.onmessage(e)console.log(e.data);});onUnmounted((){// 清理所有资源clearInterval(timer.value);socket.value.close();console.log(组件已卸载资源已清理);});return{};}};通过以上策略可确保组件卸载时资源被安全释放避免内存泄漏提升应用稳定性和性能。