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（双端对比算法）中，当发现旧节点需前移时，会执行类似以下逻辑：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 找到目标父元素：
parentElm = oldCh[0].elm.parentNode - 确定插入位置：通常是当前待处理的新节点对应的真实 DOM 元素（
refElm），即“插到 refElm 前面” - 执行移动：
parentElm.insertBefore(elm, refElm)，其中elm是要移动的旧节点 DOM
注意：refElm 可能为 null，此时 insertBefore 等效于 appendChild，用于追加到末尾。
为什么不用 remove + append？
看似等价的操作，在浏览器中行为不同：
-
removeChild会立即触发 DOM 脱离文档流，可能引发 layout thrashing 或事件丢失（如 input 失去焦点） -
insertBefore是原子操作：节点在文档中“滑动”，不经历脱离再加入的过程，保留 focus、selection、滚动位置等状态 - 对表单控件、富文本编辑器、第三方库集成更友好，副作用更可控
开发者需要注意的实际影响
理解这一机制有助于写出更符合 Vue 更新逻辑的代码：
- key 必须唯一且稳定：否则 Vue 无法正确识别可复用节点，导致本该移动的节点被错误替换
- 避免在 v-for 中使用 index 作为 key：排序或增删时 index 变化会导致大量无谓移动或重建
- 自定义指令或手动操作 DOM 时，不要绕过 Vue 的节点管理：直接修改
parentNode或调用appendChild可能破坏 patch 一致性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
