Vue.js 的 Diff 算法不为 Fragment 设计特殊逻辑，而是将其子节点直接提升至父级参与标准 Diff；Fragment 无真实 DOM、无 props/ref/生命周期，更新完全由带 key 的子节点驱动。
Vue.js 的 Diff 算法在处理 Fragment（多根节点）时，并不单独为 Fragment 设计特殊对齐逻辑，而是将其子节点**直接提升到父级比对上下文**中参与标准 Diff 流程。Fragment 本身是编译/运行时的占位抽象，不生成真实 DOM 节点，因此更新对齐完全落在其子节点序列上。
Fragment 子节点被扁平化纳入同层比对
当一个组件或模板返回 Fragment（如 `
旧列表：[vnodeA, vnodeB, vnodeC]
新列表：[vnodeX, vnodeB, vnodeD]
算法按常规 keyed 或 unkeyed 列表逻辑执行双端比较或最长递增子序列匹配，与是否来自 Fragment 无关。
key 是跨 Fragment 更新稳定性的唯一保障
若 Fragment 内部子节点未设置 key，Vue 将退化为“就地复用”策略：按索引顺序逐个比对，新增/删除均发生在末尾。这极易导致状态错位（如输入框失焦、动画中断）。
只要每个子节点有稳定唯一的 key，无论它们是否属于同一个 Fragment，Diff 都能准确识别“哪个旧节点对应哪个新节点”，实现跨位置移动、复用与局部更新。
Vue 3 对 Fragment 多根场景的额外优化
Vue 3 在 patchKeyedChildren 中强化了对空 Fragment 和动态插入的容错：
• 若新 Fragment 子节点数为 0，直接清空旧子节点
• 若旧节点已卸载但新节点含相同 key，仍能正确挂载并复用组件实例（依赖内部 keep-alive 与 unmount 时机控制）
• Fragment 无 props、无 ref、无生命周期，因此不触发额外 patch 开销，所有更新开销仅来自其子节点的实际变更
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
开发中需避免的误区
• 不要给 Fragment 标签本身加 key —— 它不参与 Diff，无效且可能引发警告
• 不要假设 Fragment 会“包裹”子节点形成独立 diff 上下文 —— 它没有边界，子节点直接暴露在父级比对层级
• 在 v-for 中嵌套 Fragment 时，key 必须放在 Fragment 内部的**第一个有意义的子元素**上，否则无法建立映射关系
