Vue的diff算法中，节点替换与删除严格依据sameVnode判断和层级关系决策：标签名、组件类型或key任一不匹配即整棵替换；旧节点在新节点同级列表中消失时立即删除，不跨层、不延迟，且分离替换与删除以保障生命周期、资源清理及过渡动画正确执行。
Vue 的虚拟 DOM 比对（diff）过程中，节点替换与删除不是随意执行的，而是严格依据 sameVnode 判断结果和层级结构关系来决策。核心逻辑在于：**不复用就销毁，不保留就清除**——既避免冗余 DOM 操作，也防止状态错乱。
节点替换：类型不同时直接整棵替换
当新旧 VNode 的标签名（tag）、是否为组件、key 值三者中任一不匹配，sameVnode(a, b) 返回 false，Vue 就判定这两个节点“不可复用”。此时：
- 旧节点及其全部子树会被完整卸载：触发
destroy钩子、移除事件监听、清空引用 - 新节点从头创建并插入：调用
createElm递归生成真实 DOM，挂载到父容器指定位置 - 典型场景包括：从
<div>变成<span>；组件 A 切换为组件 B；带 key 的列表项被完全替换成另一个 key 的节点
节点删除：仅在旧节点无对应新节点时触发
删除只发生在 oldVNode 存在、但 newVNode 中已彻底消失的情况，且仅限于当前比对层级。关键点是：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 它不跨层：父节点被替换后，其子节点的销毁由父级替换逻辑覆盖，不会单独走删除流程
- 它不延迟：一旦确认某 oldVNode 在 newVNode 的同级子列表中找不到匹配项，立即调用
removeNode或removeAndInvokeRemoveHook - 常见于 v-if 切换、列表过滤后长度变短、或动态 slot 内容清空等场景
为什么不能跳过删除直接替换？
看似“替换”已包含“删旧建新”，但 Vue 明确分离这两步，是因为：
立即学习“前端免费学习笔记（深入）”；
-
生命周期控制需要：
beforeDestroy和destroyed钩子必须在 DOM 移除前执行，替换逻辑无法保证这一时机 - 资源清理不可省略：定时器、第三方库实例、自定义事件绑定等，需在节点销毁阶段统一释放
-
过渡动画依赖删除时机：如
<transition>的 leave 阶段，必须基于真实 DOM 节点移除动作触发
key 对删除与替换行为的实际影响
有无 key 不改变“替换/删除”的本质逻辑，但极大影响判断粒度：
- 无 key 时：同层级相同标签的节点按顺序一一对应，B1/B2 互换会触发两次更新 + 两次重建，可能误删再建
- 有 key 时：每个节点身份唯一，B1(key="a") 和 B2(key="b") 顺序变化，只会移动 DOM 节点，不触发删除或替换
- key 为空或重复，会导致复用失效，退化为无 key 行为，间接引发更多删除与新建
