Vue 3 中 beforeDestroy 和 destroyed 钩子已正式被 onBeforeUnmount 和 onUnmounted 替代，语义更准确：前者在组件卸载前执行（实例仍完整），后者在完全卸载后执行（响应式等已被清理）。
Vue 3 中，旧版 Vue 2 的 beforeDestroy 和 destroyed 钩子已正式被 onBeforeUnmount 和 onUnmounted 替代。这不是简单改名，而是语义更准确、机制更清晰的升级。
销毁阶段钩子对应关系
直接映射如下：
-
beforeDestroy→onBeforeUnmount（组件从 DOM 卸载前，实例仍完整可用） -
destroyed→onUnmounted（组件已完全卸载，响应式系统、事件监听、定时器等均已被清理）
为什么这样改？
关键词是“卸载”而非“销毁”——组件不是被暴力清除，而是从当前渲染上下文中被移除。比如在 <keep-alive> 中，组件可能被缓存而非销毁；路由切换时，组件也可能只是暂时脱离 DOM。新命名更贴合实际行为，避免误导。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 旧名
destroy容易让人误以为实例内存已被释放（其实不是） - 新名
unmount明确表达“脱离挂载点”的动作，与 Vue 内部渲染器逻辑一致 - 官方兼容层（
@vue/compat）仍支持旧名，但控制台会发出警告，不建议长期使用
组合式 API 中的正确用法
必须通过 import 显式引入，不能直接调用：
立即学习“前端免费学习笔记（深入）”；
- 在
<script setup>中：
import { onBeforeUnmount, onUnmounted } from 'vue'
onBeforeUnmount(() => {
// 清理副作用：取消未完成的请求、移除全局事件监听、停止定时器
abortController?.abort()
window.removeEventListener('keydown', handleKey)
clearInterval(timer)
})
onUnmounted(() => {
// 确认组件已不可用，适合做最终日志或状态归零（极少需要）
console.log('组件已卸载')
})
</script>
- 可多次注册同一钩子，按顺序执行（Vue 2 中重复定义会覆盖）
- 若使用选项式 API，仍可写
beforeUnmount()和unmounted()，无需 import，但命名已更新
常见误区提醒
容易忽略的关键点：
-
onBeforeUnmount中仍可访问组件所有响应式数据和方法，但 DOM 已开始解绑，慎操作真实元素 -
onUnmounted中无法再访问this.$el或任何依赖 DOM 的逻辑，此时组件实例已进入“半销毁”状态 - 不要在
onUnmounted中试图重新触发组件逻辑（如再次调用fetch），它只用于收尾，不用于恢复或重试
