vue diff算法通过key决定组件复用或重建：相同key且类型一致则复用实例并更新props；key不同或类型不一致则先卸载旧实例（beforeunmount→unmounted），再创建新实例（beforecreate→mounted）；无key时易误复用致状态混乱。
Vue 的 Diff 算法在处理组件嵌套更新时，并不直接决定“实例销毁与创建的顺序”，而是通过虚拟 DOM 的比对结果，驱动 真实组件实例的复用、更新、挂载或卸载。这个过程的核心在于：Vue 优先尝试复用已有组件实例（尤其是有 key 的情况下），只有当无法复用时，才会触发旧实例的 beforeUnmount/unmounted 和新实例的 beforeCreate → mounted 生命周期。
key 是控制复用逻辑的关键开关
当嵌套组件列表发生增删或顺序变化时，Vue 依赖 key 判断节点是否可复用：
- 相同
key+ 相同组件类型 → 复用实例，只触发updated或props更新（不走销毁/重建） - 不同
key或组件类型不一致 → 旧实例被卸载（beforeUnmount→unmounted），新实例被创建并挂载（beforeCreate→mounted） - 未设置
key时，Vue 使用“就地更新”策略，可能错误复用组件，导致状态混乱（例如表单输入丢失、动画异常）
嵌套结构变化时的实际销毁/创建顺序
假设父组件中渲染一组子组件：<child :id="item.id" v-for="item in list" :key="item.id"></child>，当 list 从 [A, B, C] 变为 [B, D, A]：
- B 组件因
key相同被复用，仅更新 props，不销毁也不重建 - A 组件从索引 0 移动到索引 2，但
key未变，仍被复用（位置移动不影响复用判断） - C 组件消失 → 触发
beforeUnmount→unmounted - D 组件新增 → 触发
beforeCreate→created→beforeMount→mounted
注意：销毁和创建不是“批量先销毁再创建”，而是按虚拟 DOM 新旧树比对后的指令流依次执行——比如某个位置判定需替换，就立即卸载旧组件、挂载新组件。
父子组件间的生命周期触发时机
组件嵌套下，Diff 导致的更新会形成明确的调用链：
- 父组件更新时若子组件被复用，则子组件仅响应
updated或watch；若子组件被替换，则其卸载生命周期在父组件的updated之前完成 - 卸载顺序：子组件先于父组件（如果父组件也被替换）；创建顺序：父组件
mounted后，子组件才完成mounted - 使用
v-if替代v-show会强制销毁/重建，而v-show仅控制 CSS 显示，不触发生命周期
调试与验证方法
可通过生命周期钩子打日志观察实际顺序：
- 在子组件中打印
console.log('mounted', this.$vnode.key)和console.log('unmounted', this.$vnode.key) - 配合 Vue Devtools 查看组件树实时变化，确认哪些实例被复用、哪些被重建
- 在父组件
updated钩子中检查this.$refs.child是否仍是同一个引用（复用时引用不变）
不复杂但容易忽略：key 必须稳定且唯一，动态生成（如 Math.random()）会导致每次都新建实例。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
