Vue3 渲染器中对 Fragment 的特殊 Patch 逻辑：解决多个根节点排序-Vue.js-PHP中文网

vue 3 fragment 渲染器通过维护子节点锚点（anchor/endanchor）实现无 dom 节点的多根模板更新，patch 时逐个操作子节点并基于前兄弟节点 anchor 移动，不依赖父容器；其 process 函数仅处理子节点更新与锚点同步，不执行属性/文本操作，导致 transition-group 动画和 ref 绑定受限。

vue3 渲染器中对 fragment 的特殊 patch 逻辑：解决多个根节点排序

Vue 3 渲染器对 Fragment（即多个根节点的模板）采用了一套独立于普通元素的 Patch 逻辑，核心目标是**维持子节点在 DOM 中的物理顺序与虚拟节点数组顺序严格一致**，避免因插入/移动操作引发错位。

Fragment 不生成真实 DOM 节点，但需管理子节点锚点

Fragment 本身不对应任何 DOM 元素，因此不能像普通组件或元素那样用自身作为挂载点或锚点。渲染器必须显式维护其子节点的边界信息：

每个 Fragment 的 el 属性为 null，但会记录第一个子节点（anchor）和最后一个子节点（用于确定插入位置范围）
在 diff 过程中，Fragment 的 patch 函数不调用 hostInsert 插入自身，而是遍历子节点逐个 patch，并确保它们被插入到正确的相邻位置
当子节点数量变化（如新增、删除、重排序）时，渲染器依据新旧子节点的 key 和索引关系，复用已有节点、移动节点或卸载/挂载新节点，全程不依赖父级 Fragment 的 DOM 容器

关键 Patch 行为：移动操作基于“前一个兄弟节点”而非父容器

对 Fragment 子节点的移动（move）不使用 parentNode.insertBefore(el, refNode) 中的 parentNode（因为 Fragment 没有 parentNode），而是直接使用宿主平台提供的 hostInsert(el, parent, anchor)，其中 anchor 是该节点在新顺序中“前一个兄弟节点”的 DOM 元素（或 null 表示开头）：

vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

网站特效

网站源码

网站素材

前端模板