Vue 3 中，unmounted 生命周期钩子会在组件实例被销毁并从 DOM 中移除后调用

Vue3中unmounted钩子在组件销毁时触发，常见场景包括：

1. v-if条件变化；
2. 动态组件切换；
3. 路由导航；
4. v-for列表更新；
5. 父组件卸载；
6. 手动调用unmount()；
7. Teleport目标移除；
8. 组合式API停止响应式效果。

---

KeepAlive缓存的组件会触发deactivated而非unmounted。

---

最佳实践是在unmounted中清理定时器、事件监听等资源，避免内存泄漏。

---

理解这些触发条件有助于更好地管理组件生命周期。

在 Vue 3 中，unmounted生命周期钩子会在组件实例被销毁并从 DOM 中移除后调用。

以下是会触发组件卸载（unmount）的常见情景：

1.条件渲染导致的组件移除

vue

<template> <ChildComponent v-if="showChild" /> </template> <script setup> import { ref } from 'vue' const showChild = ref(true) // 当 showChild 变为 false 时，ChildComponent 会被卸载 setTimeout(() => { showChild.value = false // 触发 ChildComponent 的 unmount }, 3000) </script>

2.动态组件切换

vue

<template> <component :is="currentComponent" /> </template> <script setup> import { ref, shallowRef } from 'vue' import ComponentA from './ComponentA.vue' import ComponentB from './ComponentB.vue' const currentComponent = shallowRef(ComponentA) // 切换组件时，前一个组件会被卸载 const switchComponent = () => { currentComponent.value = ComponentB // ComponentA 会被卸载 } </script>

3.路由导航

javascript

// 路由导航时，离开当前路由对应的组件会被卸载 router.push('/new-route') // 当前路由组件会被卸载（如果不需要被缓存）

4.v-for 列表项变化

vue

<template> <div v-for="item in list" :key="item.id"> <ListItem :item="item" /> </div> </template> <script setup> import { ref } from 'vue' const list = ref([ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' } ]) // 移除数组元素时，对应的组件会被卸载 const removeItem = (id) => { list.value = list.value.filter(item => item.id !== id) } </script>

5.父组件被卸载

vue

<template> <ParentComponent v-if="showParent"> <!-- 当 ParentComponent 被卸载时，所有子组件也会被卸载 --> <ChildComponent /> </ParentComponent> </template>

6.手动卸载组件

vue

<template> <div ref="container"></div> </template> <script setup> import { ref, onMounted, createApp } from 'vue' import DynamicComponent from './DynamicComponent.vue' const container = ref(null) let appInstance = null onMounted(() => { // 手动挂载组件 appInstance = createApp(DynamicComponent) appInstance.mount(container.value) // 手动卸载组件 setTimeout(() => { appInstance.unmount() // 触发 unmount container.value.innerHTML = '' }, 5000) }) </script>

7.使用<Teleport>但目标元素被移除

vue

<template> <Teleport :to="target"> <Modal /> </Teleport> </template> <script setup> import { ref } from 'vue' const target = ref('body') // 如果目标元素被从 DOM 中移除，通过 Teleport 传送的组件也会被卸载 </script>

8.在组合式 API 中手动停止响应式效果

vue

<script setup> import { onUnmounted } from 'vue' // 当组件被卸载时，onUnmounted 钩子会被调用 onUnmounted(() => { console.log('组件已卸载') // 清理工作，如清除定时器、取消事件监听等 }) </script>

特殊情况：组件不会被卸载

使用<KeepAlive>缓存组件

vue

<template> <KeepAlive> <ComponentA v-if="showA" /> <ComponentB v-else /> </KeepAlive> </template>

• 组件切换时不会触发unmounted，而是触发deactivated

• 从缓存中移除时才会触发unmounted

使用<Suspense>的异步组件

异步组件的加载和卸载有特殊处理，但最终卸载时仍会触发unmounted。

最佳实践

在unmounted或onUnmounted中：

1. 清理定时器

2. 取消事件监听器

3. 清理第三方库实例

4. 取消网络请求

5. 清理全局状态监听

vue

<script setup> import { onUnmounted } from 'vue' let intervalId onMounted(() => { intervalId = setInterval(() => { console.log('定时执行') }, 1000) }) onUnmounted(() => { clearInterval(intervalId) // 清理定时器 }) </script>

理解这些触发情景有助于更好地管理组件生命周期和资源清理。