Vue.js 在 Patch 阶段通过 insertBefore 实现 DOM 节点移动，复用节点避免销毁重建以提升性能；仅在新旧子节点结构变化且存在可复用节点时触发，精准插入以保持真实 DOM 与虚拟 DOM 顺序一致。

Vue.js 在 Patch 阶段 通过 insertBefore 实现 DOM 节点移动，核心在于复用已有节点、避免销毁重建，从而提升性能。它不直接调用 appendChild 或 remove + append，而是精准定位插入位置，让真实 DOM 结构与虚拟 DOM 的顺序保持一致。

insertBefore 的触发时机

当新旧 VNode 子节点列表结构变化但存在可复用节点时（例如列表排序、拖拽重排、filter 过滤后顺序调整），Vue 会进入“移动逻辑”。此时若某个旧节点在新序列中位置靠前，而其真实 DOM 已位于更后位置，就需要把它“提前”——insertBefore 就是完成这一步的关键原生 API。

• 不是所有更新都会触发移动：静态节点、key 不匹配、组件实例不复用等情况会走替换或新建流程
• 移动只发生在同一父容器内：跨父级的节点不会被 insertBefore 移动，而是分别卸载和挂载
• Vue 内部通过 canMove 标志控制是否启用移动逻辑（例如服务端渲染首次挂载时通常禁用）

Vue 源码中 insertBefore 的典型调用位置

在 patchVNode 和 updateChildren（双端对比算法）中，当发现旧节点需前移时，会执行类似以下逻辑：

• 找到目标父元素：parentElm = oldCh[0].elm.parentNode
• 确定插入位置：通常是当前待处理的新节点对应的真实 DOM 元素（refElm），即“插到 refElm 前面”
• 执行移动：parentElm.insertBefore(elm, refElm)，其中 elm 是要移动的旧节点 DOM

注意：refElm 可能为 null，此时 insertBefore 等效于 appendChild，用于追加到末尾。

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

立即学习“前端免费学习笔记（深入）”；

为什么不用 remove + append？

看似等价的操作，在浏览器中行为不同：

• removeChild 会立即触发 DOM 脱离文档流，可能引发 layout thrashing 或事件丢失（如 input 失去焦点）
• insertBefore 是原子操作：节点在文档中“滑动”，不经历脱离再加入的过程，保留 focus、selection、滚动位置等状态
• 对表单控件、富文本编辑器、第三方库集成更友好，副作用更可控

开发者需要注意的实际影响

理解这一机制有助于写出更符合 Vue 更新逻辑的代码：

• key 必须唯一且稳定：否则 Vue 无法正确识别可复用节点，导致本该移动的节点被错误替换
• 避免在 v-for 中使用 index 作为 key：排序或增删时 index 变化会导致大量无谓移动或重建
• 自定义指令或手动操作 DOM 时，不要绕过 Vue 的节点管理：直接修改 parentNode 或调用 appendChild 可能破坏 patch 一致性