Vue3 app.onUnmount() 函数（实战指南）

Vue3 app.onUnmount() 函数

Vue 3 的 app.onUnmount() 函数是用于监听 Vue 应用卸载事件的钩子函数。当 Vue 应用被销毁或从 DOM 中移除时，该函数会被调用，适合用于清理资源、移除监听器、取消异步操作等。

核心概念

app.onUnmount() 是 Vue 3 中组合式 API 提供的生命周期钩子之一，属于应用级别的钩子，而非组件级别。它通常与 app.mount() 搭配使用，用于控制 Vue 应用的挂载与卸载过程。

该函数类似于 React 的 useEffect 的清理阶段，或 Vue 2 中的 beforeDestroy 和 destroyed 生命周期。不同之处在于，Vue 3 将这些功能统一到组合式 API 的钩子中，使得逻辑更清晰、管理更方便。

基础语法

在 Vue 3 中，app.onUnmount() 一般与 app.mount() 一起使用。语法如下：

const app = createApp(App)
app.mount('#app')
app.onUnmount(() => {
    // 应用卸载时执行的逻辑
})

挂载与卸载流程

使用 createApp(App) 创建一个 Vue 应用实例
使用 mount('#app') 将应用挂载到 DOM 节点
使用 onUnmount() 注册一个回调函数，当应用被卸载时触发

示例：监听应用卸载事件

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

app.onUnmount(() => {
    console.log('Vue3 应用已卸载') // 输出：Vue3 应用已卸载
})

进阶特性

1. 清理副作用

当 Vue 应用被卸载时，可能还有一些副作用需要清理。比如通过 setInterval 设置的定时器、通过 addEventListener 注册的事件监听器等，这些都需要在 onUnmount() 中进行处理。

const app = createApp(App)

const intervalId = setInterval(() => {
    console.log('定时器运行中')
}, 1000)

app.mount('#app')

app.onUnmount(() => {
    clearInterval(intervalId) // 清理定时器，避免内存泄漏
    console.log('应用卸载，定时器已清除')
})

2. 与组件卸载区分

需要注意的是，app.onUnmount() 是应用级别的钩子，不是组件级别的。如果你希望在组件卸载时执行某些逻辑，应使用组件的 onUnmounted 钩子（来自 Vue 的 setup() 或 setup() + onUnmounted() 的组合）。

import { onUnmounted } from 'vue'

export default {
    setup() {
        const timer = setInterval(() => {
            console.log('组件定时器运行中')
        }, 1000)

        onUnmounted(() => {
            clearInterval(timer) // 清理组件内部定时器
            console.log('组件已卸载')
        })

        return {}
    }
}

3. 多次注册钩子函数

你可以多次调用 app.onUnmount() 注册多个回调函数，这些函数会在应用卸载时按照注册顺序依次执行。

const app = createApp(App)
app.mount('#app')

app.onUnmount(() => {
    console.log('第一个卸载钩子')
})

app.onUnmount(() => {
    console.log('第二个卸载钩子')
})

输出顺序为：

第一个卸载钩子
第二个卸载钩子

实战应用

1. 从 DOM 移除 Vue 应用时清理数据

在某些场景下，你可能需要动态控制 Vue 应用是否挂载。例如，根据用户操作或路由变化来卸载应用。此时 onUnmount() 就派上了用场。

import { createApp, onUnmounted } from 'vue'
import App from './App.vue'

const app = createApp(App)
const mount = (element) => {
    app.mount(element)
    app.onUnmount(() => {
        console.log('应用已从 DOM 移除')
    })
}

// 初始挂载
mount('#app')

// 模拟卸载操作
setTimeout(() => {
    const appElement = document.querySelector('#app')
    if (appElement && appElement.__vue_app__) {
        appElement.__vue_app__.unmount()
    }
}, 5000)

2. 与全局状态管理结合

如果你在应用中使用了全局状态管理库（如 Pinia），你可以在 onUnmount() 中触发一些清理逻辑，比如重置状态、移除监听等。

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

app.onUnmount(() => {
    // 清理 Pinia 状态
    console.log('应用卸载，Pinia 状态已重置')
    // 你可以在这里触发一个 store 的重置方法
})

注意事项

不要混淆应用卸载与组件卸载
app.onUnmount() 是应用级别的钩子，不是组件级别的。如果你需要在组件卸载时执行操作，应使用 onUnmounted()。
避免多次挂载同一个应用
如果你尝试多次挂载同一个 Vue 应用实例，可能会导致不可预测的行为。onUnmount() 应该在每次卸载时正确调用以确保资源清理。
确保执行顺序
如果你注册了多个 onUnmount 钩子，它们会按注册顺序依次执行，而不是反向执行。因此要确保清理逻辑的顺序合理，尤其是涉及依赖关系时。
避免过度使用
尽量只在确实需要时使用 onUnmount()，避免将不重要的逻辑放在这里，影响性能与可维护性。

总结

Vue 3 的 app.onUnmount() 函数是管理应用生命周期的重要工具，适合用于清理全局资源或响应应用卸载事件，理解其作用和使用方式有助于编写更健壮、更可控的 Vue 应用。