动态组件切换时，vue 是否销毁重建取决于 key 是否变化：不带 key 可能复用实例；key 改变则强制销毁旧组件并创建新组件；key 相同仅更新 props；销毁前 beforeunmount 中可清理副作用，dom 尚存但不可交互。
动态组件切换时，Vue 会根据 <component :is="currentComp"></component> 中的值变化决定是否复用或销毁当前组件。关键不在“是否挂载”，而在于 key 是否变化 —— 这直接触发销毁与重建流程。
key 变化是销毁重建的开关
当 :is 值改变，且组件没有显式设置 key，Vue 会尝试复用已有实例（跳过销毁）；一旦加上唯一 key 并发生变更，Vue 就强制销毁旧组件、创建新组件：
-
不带 key：可能复用实例 →
beforeUpdate/updated触发，beforeDestroy不触发 -
带 key 且 key 改变：旧组件走完整销毁流程（
beforeUnmount→unmounted），新组件从头走创建→挂载流程 - key 相同但 :is 改变：仍复用，仅更新 props，不销毁重建
销毁阶段的实际行为要关注 beforeUnmount
在 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）中，组件实例仍完全可用：
- 可访问
this.xxx或setup中的响应式数据和方法 - 必须在此清理副作用：清除
setTimeout/setInterval、取消watch、关闭 WebSocket、移除addEventListener - 注意：DOM 元素尚未被移除，但已不可交互（Vue 正在打补丁前的最后阶段）
重建不是“全新开始”，而是按需初始化
新组件实例启动后，并非所有钩子都必然执行：
- 若使用
<keep-alive></keep-alive>包裹，切换时走activated/deactivated，而非销毁重建 - 未包裹时，完整走
setup→onBeforeMount→onMounted（Vue 3）或beforeCreate→created→beforeMount→mounted（Vue 2） - 异步组件加载期间，会先显示
fallback内容，加载完成才进入挂载流程
调试建议：用 Vue Devtools 观察实例状态
切换动态组件时，在 Devtools 的 Components 面板中可直观看到：
- 旧组件实例是否从列表中消失（确认已销毁）
- 新组件是否出现新实例 ID（确认重建）
- 点击组件后查看 Events 标签，确认
unmounted和mounted是否成对触发
