onUnmounted是Vue 3组件卸载后执行清理逻辑的钩子，触发场景包括v-if为false、路由跳转、动态组件切换、v-for项移除及父组件卸载；需用于清除定时器、解绑事件、取消请求等，KeepAlive组件则应使用onDeactivated/onActivated。
onUnmounted 是 Vue 3 中用于组件卸载后执行清理逻辑的核心钩子，它在组件实例从 DOM 中完全移除、响应式系统停止、所有监听器和定时器失效之后自动触发。关键不是“怎么写”，而是“什么时候该用、怎么用才安全”。
哪些情况会触发 onUnmounted
组件并非只有手动销毁才会卸载。以下场景都会自然触发 onUnmounted：
-
v-if 条件为 false：比如
<child v-if="show"></child>中show变成false - 路由跳转离开当前页面：非 KeepAlive 的页面组件在切换时会被卸载
-
动态组件切换：使用
<component :is="currentComp"></component>时替换为其他组件 - 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 'vue'<br> <br> const timer = ref(null)<br> timer.value = setInterval(() => console.log('tick'), 1000)<br> <br> onUnmounted(() => {<br> if (timer.value) clearInterval(timer.value)<br> })<br> </script>注意 KeepAlive 的特殊情况
被 <keepalive></keepalive> 包裹的组件不会触发 onUnmounted —— 它们只是被缓存，进入停用状态。此时应改用：
- onDeactivated：组件从 DOM 移除但保留在内存中时触发（相当于“休眠”）
- onActivated：组件重新插入 DOM 时触发（相当于“唤醒”）
如果你在 KeepAlive 组件里写了 onUnmounted，它永远不会执行。
