Vue 3 Fragment 渲染器通过维护子节点锚点（anchor/endAnchor）实现无 DOM 节点的多根模板更新，patch 时逐个操作子节点并基于前兄弟节点 anchor 移动，不依赖父容器；其 process 函数仅处理子节点更新与锚点同步，不执行属性/文本操作，导致 transition-group 动画和 ref 绑定受限。
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 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 例如，新顺序为 [A, C, B]，旧顺序为 [A, B, C]，则需将 B 移动到 C 后面；此时 anchor 是 C 的下一个兄弟节点（即原 C 后的节点），或若 C 是末尾则 anchor 为 null
- 这个 anchor 由
getSequence最长递增子序列算法 +move遍历共同推导，确保所有移动都满足拓扑序，避免中间状态错乱 - 没有 anchor 的节点（如首个节点）会被插入到 Fragment 的起始位置——实际由父级容器提供上下文锚点（比如父组件的
nextSibling）
更新过程中 Fragment 自身不参与 DOM 更新，仅协调子节点
Fragment 的 process 函数跳过 hostPatchProp 和 hostSetElementText 等属性/文本操作，只做三件事：
立即学习“前端免费学习笔记（深入）”；
- 调用
patchChildren对比并更新子节点（支持 text / array / slots 等多种 children 类型） - 更新 Fragment 实例的
anchor（指向新的第一个子节点）和endAnchor（指向新的最后一个子节点） - 若子节点为空数组，则清理旧子节点（遍历 unmount）；若从空变非空，则按顺序 patch 并设置 anchor
开发者无需手动干预，但需理解其影响
这一机制对用户透明，但会影响两个常见场景：
-
过渡动画失效：多个根节点的
<transition-group>必须包裹在 Fragment 内，而 Fragment 无 DOM 节点，因此 transition 的 key 绑定和节点追踪完全依赖子节点自身，不能依赖父级容器的 class 切换 -
ref 获取限制：无法对 Fragment 使用
ref，因为无对应 DOM 元素；如需访问多个根节点中的某一个，必须在子元素上单独加 ref
