beforeUnmount 是 Vue 3 组件卸载前最后一个可操作 DOM 和访问实例的时机，适合清理定时器、事件监听、第三方插件资源等，此时 DOM 存在、实例可用，但不可修改响应式状态。
beforeUnmount 是 Vue 3 中组件卸载前的最后一个“可操作 DOM + 可访问实例”的时机，特别适合做清理工作——比如关闭定时器、移除全局事件监听、暂停动画、释放第三方插件资源等。它比 unmounted 更早触发，此时 DOM 还在页面上，组件实例也完整可用，是安全执行确认和收尾逻辑的理想位置。
beforeUnmount 的核心特点
它在组件即将从 DOM 中移除、但尚未销毁时调用。和 Vue 2 的 beforeDestroy 功能一致，只是命名更准确（强调“卸载”而非“销毁”）。关键点包括：
- DOM 节点仍存在，可读取或临时操作（如弹出确认框）
- 组件实例（this 或 setup 中的响应式变量、方法）全部可用
- 适合做“预防性清理”：中断异步任务、取消请求、保存草稿、提示用户
- 不会在服务端渲染中执行
回收第三方插件的典型场景
很多插件（如 ECharts、Mapbox、Swiper、Canvas 动画库）需要手动销毁实例或解除绑定，否则容易造成内存泄漏或重复初始化。beforeUnmount 是最稳妥的回收入口：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
-
ECharts：调用
chart.dispose()释放图表实例和事件监听 -
地图类插件（如 Leaflet / AMap）：调用
map.remove()或map.destroy() -
轮播/滑动组件（如 Swiper）：调用
swiper.destroy(true)清理所有事件和 DOM 绑定 -
WebSocket 或长连接：调用
socket.close()主动断开 -
全局事件总线：用
eventBus.off('xxx', handler)精准解绑，避免残留监听
正确写法示例（Composition API）
在 setup() 中使用需先导入，并确保插件实例在作用域内可访问：
立即学习“前端免费学习笔记（深入）”；
注意：不要在 beforeUnmount 里修改响应式状态（如赋值 ref），否则可能触发更新循环或警告
import { onBeforeUnmount, ref } from 'vue'
import * as echarts from 'echarts'
<p>export default {
setup() {
const chartRef = ref(null)
const chartInstance = ref(null)</p><pre class="brush:php;toolbar:false;">// 挂载后初始化图表
onMounted(() => {
const dom = chartRef.value
if (dom) {
chartInstance.value = echarts.init(dom)
chartInstance.value.setOption({ /* 配置 */ })
}
})
// 卸载前销毁实例
onBeforeUnmount(() => {
if (chartInstance.value) {
chartInstance.value.dispose() // ✅ 关键清理动作
chartInstance.value = null
}
})
return { chartRef }} }
常见误区提醒
- ❌ 把清理逻辑全堆在
onUnmounted：此时 DOM 已移除，部分插件销毁方法会报错（如依赖 DOM 的 dispose） - ❌ 在
beforeUnmount中修改响应式数据（如count.value++）：可能引发警告甚至无限更新 - ❌ 忘记清除定时器或 interval：用
clearInterval(timerId)或clearTimeout(timeoutId)显式清理 - ❌ 使用
this.$nextTick或异步操作：beforeUnmount 是同步钩子，不支持 await，也不该延迟执行清理
