onBeforeUnmount 是组件卸载前执行的最后一个可干预时机，用于清理定时器、取消请求、移除事件监听等副作用，此时组件实例完整、DOM 存在、响应式状态仍可读写。
在 Vue 3 的 Composition API 中，onBeforeUnmount 是组件卸载前执行的最后一个“可干预”时机，适合做清理工作——比如清除定时器、取消未完成的请求、移除事件监听器等。它对应 Vue 2 的 beforeDestroy，但语义更准确（组件尚未卸载，但即将被移除）。
onBeforeUnmount 的核心作用
它在组件从 DOM 中移除前、响应式系统还未完全解绑时触发。此时组件实例仍完整可用：ref、computed、props 都能正常访问，DOM 元素也还在页面中。
- 不是“卸载后”，而是“卸载动作启动前”
- 比
onUnmounted更早，且仍可安全读写响应式状态 - 是清理副作用（side effects）最常用、最稳妥的钩子
常见清理场景与写法
实际开发中，以下几类操作必须在 onBeforeUnmount 中处理，否则可能引发内存泄漏或报错：
-
清除定时器：如
setInterval或setTimeout的句柄需clearInterval/clearTimeout -
取消异步请求：使用
AbortController中止 fetch，或取消 Axios 请求 CancelToken（Vue 3 推荐用 AbortSignal） -
移除全局事件监听：如
window.addEventListener('resize', handler)对应的removeEventListener -
销毁第三方库实例：如 ECharts 的
dispose()、Mapbox 的remove()
基本用法示例
在 setup() 中直接导入并调用：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
import { ref, onBeforeUnmount } from 'vue'
export default {
setup() {
const timer = ref(null)
const data = ref([])
// 启动一个轮询
timer.value = setInterval(() => {
// 模拟请求
fetch('/api/data').then(res => res.json()).then(d => data.value = d)
}, 5000)
// 卸载前清理
onBeforeUnmount(() => {
if (timer.value) {
clearInterval(timer.value)
timer.value = null
}
})
return { data }
}
}
注意：onBeforeUnmount 必须在 setup() 内同步注册，不能放在异步回调或条件分支里（否则可能不被执行）。
和 onUnmounted 的区别要清楚
两者常被混淆，关键差异在于：
-
onBeforeUnmount：组件还在，DOM 还在，响应式数据可读可写，适合“主动收尾” -
onUnmounted：组件已从 DOM 移除，响应式系统开始解绑，ref值仍存在但不再响应，不适合修改状态或操作 DOM
例如，你想在卸载前把当前滚动位置存入 localStorage，该用 onBeforeUnmount；而日志记录“组件已卸载”，两个钩子都可，但逻辑上更倾向 onUnmounted。
