VUE 组合式 API：生命周期钩子 onUnmounted() 多个例子代码！

组件消亡时的记忆清除术

三年前我接手过一个内存泄漏的医疗管理系统，当看到Chrome性能面板里不断攀升的JS堆内存曲线时，终于理解onUnmounted的价值——它就像数字世界的入殓师，负责给组件体面地料理后事。Vue核心成员@yyx990803在GitHub讨论中说过：”忘记清理副作用，就像在沙滩上写代码，潮水（组件卸载）一来，所有痕迹都会被吞噬。”

血泪教训：那些年我们泄漏的内存

在开发实时股票行情模块时，同事忘记清除WebSocket连接，导致用户切换页面8次后浏览器崩溃。这个事故让我们团队在周报上写了整整三个月的内存监控日志。

// 错误示范：未清理的WebSocket const setup = () => { const ws = new WebSocket('wss://stock.com') ws.onmessage = handleData }

五大必知清理场景

场景一：定时器清除仪式

在开发秒杀活动组件时，我们创造了定时器双保险机制：

const timer = ref<number>() onMounted(() => { timer.value = window.setInterval(fetchStock, 1000) }) onUnmounted(() => { if (timer.value) { clearInterval(timer.value) timer.value = null // 双重保险 } })

场景二：DOM事件解绑艺术

当实现全屏拖拽功能时，发现组件销毁后document依然保留事件监听。这就像幽灵手指在操控界面，最终我们用事件三件套完美解决：

const handleMove = (e) => { /*...*/ } onMounted(() => { document.addEventListener('mousemove', handleMove) document.addEventListener('mouseup', handleEnd) }) onUnmounted(() => { document.removeEventListener('mousemove', handleMove) document.removeEventListener('mouseup', handleEnd) })

场景三：第三方库的安乐死

在整合ECharts图表时，从网址导航站找到的最佳实践给了我们启发：

let chartInstance: echarts.ECharts | null = null onMounted(() => { chartInstance = echarts.init(container.value) }) onUnmounted(() => { chartInstance?.dispose() chartInstance = null // 防止僵尸实例 })

高阶清理模式

自动清理工厂模式

受React useEffect启发，我们创建了自动清理的Hooks：

function useAutoCleanup(fn: () => () => void) { const cleanup = ref<() => void>() onMounted(() => { cleanup.value = fn() }) onUnmounted(() => { cleanup.value?.() }) } // 使用示例 useAutoCleanup(() => { const timer = setInterval(update, 1000) return () => clearInterval(timer) })

内存泄漏检测黑科技

我们在网址导航的开发者工具专区发现神器「Memory Snapshots」，配合以下代码实现自动化检测：

const __DEV__ = import.meta.env.DEV onUnmounted(() => { if (__DEV__ && this.__leakCheck) { console.warn('潜在内存泄漏:', this.__leakCheck) } })

避坑指南：来自社区的智慧

异步操作的幽灵回调

在开发聊天组件时，我们掉进过Promise陷阱：

const fetchData = async () => { const res = await api.getMessages() // 组件卸载后仍会执行 messages.value = res.data } // 正确解法 const isActive = ref(true) onUnmounted(() => isActive.value = false) const safeFetch = async () => { const res = await api.getMessages() if (isActive.value) { messages.value = res.data } }

闭包陷阱的破局之道

根据Vue RFC#17，在setup函数中使用闭包要特别小心：

const setup() { let localVar = 0 // 危险！ onMounted(() => { setInterval(() => localVar++, 1000) }) // 卸载后定时器仍持有localVar引用 }

组件墓志铭的撰写艺术

在最新Vue 3.4中，新增的effectScope API让资源清理更加优雅。正如Evan You在Vue Mastery课程中演示的：

const scope = effectScope() scope.run(() => { const timer = setInterval(...) onUnmounted(() => clearInterval(timer)) }) // 批量清理 onUnmounted(() => scope.stop())

当你在深夜调试组件卸载问题时，记得打开网址导航中的Vue调试工具合集。记住，好的onUnmounted处理就像精心设计的自动焚化炉，既要彻底清除痕迹，又要避免误伤仍在使用的资源——这其中的分寸，正是编程之道的精妙所在。