onUnmounted是Vue 3组件卸载后执行清理逻辑的钩子，触发场景包括v-if为false、路由跳转、动态组件切换、v-for项移除及父组件卸载；需用于清除定时器、解绑事件、取消请求等，KeepAlive组件则应使用onDeactivated/onActivated。

onUnmounted 是 Vue 3 中用于组件卸载后执行清理逻辑的核心钩子，它在组件实例从 DOM 中完全移除、响应式系统停止、所有监听器和定时器失效之后自动触发。关键不是“怎么写”，而是“什么时候该用、怎么用才安全”。

哪些情况会触发 onUnmounted

组件并非只有手动销毁才会卸载。以下场景都会自然触发 onUnmounted：

• v-if 条件为 false：比如 中 show 变成 false
• 路由跳转离开当前页面：非 KeepAlive 的页面组件在切换时会被卸载
• 动态组件切换：使用 时替换为其他组件
• v-for 列表项被删除或重排：被移出渲染列表的项会触发自身 onUnmounted
• 父组件卸载：子组件随之卸载，逐层触发各自的 onUnmounted

onUnmounted 的典型用途

它的核心使命是“善后”——防止内存泄漏和副作用残留：

• 清除定时器：如 const timer = setInterval(...)，必须在 onUnmounted 中调用 clearInterval(timer)
• 解绑全局事件监听：例如 window.addEventListener('resize', handler)，需对应 window.removeEventListener('resize', handler)
• 取消未完成的请求：配合 AbortController，在 onUnmounted 中调用 controller.abort()
• 释放第三方库资源：如地图实例 map.destroy()、图表实例 chart.dispose()

正确使用 onUnmounted 的写法

必须在 setup() 中导入并调用，不能在模板或外部定义：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

<script setup><br> import { onUnmounted, ref } from '<a style="color:#f60; text-decoration:underline;" title= "vue"href="https://m.php.cn/zt/15721.html" target="_blank">vue'<br> <br> const timer = ref(null)<br> timer.value = setInterval(() => console.log('tick'), 1000)<br> <br> onUnmounted(() => {<br> &nbsp;&nbsp;if (timer.value) clearInterval(timer.value)<br> })<br> </script>

注意 KeepAlive 的特殊情况

被 包裹的组件不会触发 onUnmounted —— 它们只是被缓存，进入停用状态。此时应改用：

• onDeactivated：组件从 DOM 移除但保留在内存中时触发（相当于“休眠”）
• onActivated：组件重新插入 DOM 时触发（相当于“唤醒”）

如果你在 KeepAlive 组件里写了 onUnmounted，它永远不会执行。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！