vue.js 的 fragment 不参与独立 diff，而是编译期转为 vnode 数组，运行时由父组件调用 patchkeyed/unkeyedchildren 对子 vnode 逐个比对更新，无状态、不复用、依赖 key 稳定性。

Vue.js 的 Diff 算法在处理同级 Fragment（即具有多个根节点的组件，如 `

Fragment 在编译期被标准化为普通 vnode 数组

当使用 `

```js
return [h('div', 'A'), h('span', 'B')]
```

这意味着父组件在 patch 子组件时，看到的是子组件返回的一维 vnode 列表，而非一个带 type = Fragment 的 vnode。Fragment 在此阶段已被“解构”，不进入 runtime diff 主干。

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

运行时由 parent 承担多节点 diff 责任

当父组件更新、需要重 render 子组件时，它拿到新旧两个 vnode 数组（oldChildren 和 newChildren），然后调用 `patchKeyedChildren` 或 `patchUnkeyedChildren` 进行比对。此时：

• 每个数组元素都是普通 vnode（type 是 'div'、'span' 等），可直接参与双端对比或循环 patch
• key 的存在与否决定比对策略：有 key 时走高效复用逻辑；无 key 时按顺序逐个 patch
• 新增/删除节点表现为数组长度变化，Diff 算法自动处理插入、移动、卸载等操作

Fragment 自身不维护状态，也不触发独立 update

Fragment 是纯粹的结构占位符，没有实例、没有 setup、不响应式、不触发 mounted 或 updated 钩子。它的“更新”完全依赖于其子 vnode 的更新行为：

• 子 vnode 是响应式数据驱动的，数据变 → 子 vnode 变 → 父 patch 触发 → 对应位置重新 patch
• 若 Fragment 内部某个子 vnode 被移除（如 v-if 为 false），对应位置变为 null 或空 vnode，Diff 会执行 unmount
• Fragment 不缓存、不复用、不持有 DOM 引用——所有 DOM 操作均由子 vnode 各自管理

实践建议：保持 key 明确 + 避免隐式顺序依赖

由于 Fragment 更新本质是多 vnode 并行 patch，以下做法能提升稳定性与性能：

• 对动态列表或可能重排序的内容，始终为每个子 vnode 设置唯一且稳定的 key（避免用 index）
• 避免在 Fragment 中混用 v-if/v-for 于不同层级，防止因条件变化导致 vnode 数组结构突变，增加 diff 复杂度
• 若需对整组节点做统一过渡（如 ），应显式用 `
  ` 包裹，而非依赖 Fragment —— 因为 TransitionGroup 本身需要单根节点

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！