onBeforeUnmount 是个啥？

不少刚接触 Vue3 组合式 API 的同学，看到 onBeforeUnmount 这个生命周期钩子，总会犯嘀咕：它到底是用来干啥的？什么时候该用？和其他钩子有啥区别？今天咱们就把这些问题一个个理清楚,让你下次写代码时能精准用上它～

Vue3 的组合式 API 里，生命周期钩子都用 onXxx 这种格式命名。onBeforeUnmount 的作用很明确——在组件即将被销毁前触发，这时候组件还没真正“消失”，DOM 结构还在页面上，组件实例的各种数据、方法也都能正常访问。

要是你用过 Vue2 的选项式 API，应该记得 beforeDestroy 钩子，onBeforeUnmount 其实就是 Vue3 组合式 API 里对应它的替代品，只不过命名更贴合“组件卸载（unmount）”这个动作，毕竟 Vue3 里组件从页面移除的过程叫“卸载”嘛～

啥时候必须用 onBeforeUnmount？

你可以把 onBeforeUnmount 理解成“组件的最后一次自我整理机会”，以下这些场景，不用它就容易出 bug：

清理定时器/间隔器

比如做一个倒计时组件，用 setInterval 每秒更新数字，要是组件销毁后不清理这个定时器，它会一直跑，不仅浪费内存，还可能在你切换页面后突然“诈尸”（比如定时器里的逻辑还在修改已经销毁的组件数据），这时候 onBeforeUnmount 就得上场：

<script setup>
import { onBeforeUnmount, ref } from 'vue'
const count = ref(60)
const timer = setInterval(() => {
  count.value--
  if (count.value === 0) clearInterval(timer)
}, 1000)
onBeforeUnmount(() => {
  clearInterval(timer) // 组件销毁前，把定时器清掉
})
</script>

取消事件订阅/监听

很多项目里会用事件总线（mitt 库）做跨组件通信，要是在组件 A 里订阅了 emitter.on('xxx', 回调)，但组件销毁后没取消订阅，下次其他组件触发 'xxx' 事件时，这个已经销毁的组件的回调还会执行，轻则逻辑错乱，重则内存泄漏，这时候得用 onBeforeUnmount 解绑：

<script setup>
import mitt from 'mitt'
const emitter = mitt()
const handleNotify = (data) => {
  console.log('收到通知：', data)
}
emitter.on('notify', handleNotify)
onBeforeUnmount(() => {
  emitter.off('notify', handleNotify) // 销毁前取消订阅
})
</script>

释放第三方库资源

比如用 ECharts 做可视化图表，创建图表时会生成一个实例 chartInstance，要是组件销毁前不主动调用 chartInstance.dispose()，ECharts 实例不会自动释放，久而久之页面会越来越卡，这时候 onBeforeUnmount 善后”关键：

<script setup>
import * as echarts from 'echarts'
import { onBeforeUnmount, onMounted, ref } from 'vue'
const chartRef = ref(null)
let chartInstance = null
onMounted(() => {
  chartInstance = echarts.init(chartRef.value)
  // 配置图表...
})
onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose() // 销毁前释放 ECharts 实例
  }
})
</script>
<template>
  <div ref="chartRef" style="width: 600px; height: 400px"></div>
</template>

onBeforeUnmount 咋用？写代码的关键步骤

用 onBeforeUnmount 其实就两步：导入钩子 + 写清理逻辑。

先从 Vue 里导入 onBeforeUnmount：

import { onBeforeUnmount } from 'vue'

然后在 <script setup> 里调用它，把要清理的逻辑包在回调函数里：

onBeforeUnmount(() => {
  // 这里写所有“销毁前要做的事”
  // 比如清定时器、解绑事件、释放第三方实例...
})

注意哦！这个回调函数会在组件销毁前自动执行，不用你手动调用～

和 onUnmounted 有啥区别？别搞混！

很多同学会把 onBeforeUnmount 和 onUnmounted 弄混，其实两者执行时机差很多：

• onBeforeUnmount：组件“即将销毁”，但还没销毁，这时候组件的 DOM 还在页面上，数据、方法也都能正常访问，属于“销毁前的最后准备阶段”。

• onUnmounted：组件已经销毁完毕，这时候组件的 DOM 已经从页面移除，实例也被 Vue 回收了，属于“销毁后的收尾阶段”。

举个直观的例子：假设你要清定时器，放在 onBeforeUnmount 里，组件销毁前定时器就被清掉，不会多跑一次；但如果放在 onUnmounted 里，组件销毁过程中定时器可能还在执行，等 onUnmounted 触发时，说不定定时器已经多跑了一轮，导致数据错误或者内存泄漏。

所以优先用 onBeforeUnmount 做清理，除非你明确需要在组件彻底销毁后做操作（比如统计组件存活时长，在 onUnmounted 里记录销毁时间）。

实际项目里的“避坑”经验

哪怕理解了用法，实际写代码时也容易踩坑，分享几个常见问题和解决办法：

忘记清理，导致内存泄漏

最典型的就是定时器、事件监听没清，比如给 window 加了 resize 事件监听：

onMounted(() => {
  window.addEventListener('resize', handleResize)
})
// 忘记写 onBeforeUnmount 清理！
// 后果：组件销毁后，resize 事件还在触发 handleResize，疯狂消耗内存

解决方法：必须在 onBeforeUnmount 里解绑：

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})

混淆选项式和组合式 API

Vue2 选项式 API 里是 beforeDestroy，Vue3 组合式 API 里是 onBeforeUnmount，如果项目里同时用了选项式和组合式（比如老项目迁移），千万别写混！

异步操作里的“残留”问题

要是 onBeforeUnmount 里有异步逻辑（比如请求接口），得注意组件销毁后异步别执行，可以用一个标志位控制：

let isUnmounted = false
onBeforeUnmount(() => {
  isUnmounted = true
})
// 假设这里有个异步请求
const fetchData = async () => {
  const res = await axios.get('/api/data')
  if (!isUnmounted) { // 组件没销毁再更新数据
    data.value = res.data
  }
}

记住 onBeforeUnmount 的核心作用

一句话概括：在组件销毁前，帮你做“收尾清洁”，避免内存泄漏、逻辑错乱等问题。

下次写组件时，只要涉及“定时器、事件订阅、第三方库实例”这些需要手动清理的资源，第一时间想到 onBeforeUnmount,把清理逻辑丢进去就对了～