normalizeChildren 是 Vue 将多样子节点（字符串、数组、null 等）标准化为扁平 VNode 数组的内部函数，用于确保 diff 和挂载逻辑稳定；它将字符串转文本 VNode，忽略 null/undefined，递归扁平化数组，包装单个 VNode 为数组，并展开 Fragment 子节点。
normalizeChildren 是 Vue 内部用于统一处理子节点（children）结构的关键函数，作用是把用户传入的、格式多样的子节点（比如字符串、数组、混合嵌套、空值等）标准化为一个规范的 VNode 数组，确保后续渲染逻辑（如 patch、diff、挂载）能稳定、一致地工作。
为什么需要 normalizeChildren？
Vue 允许用户以多种方式写模板或调用 h()：
- JSX 中直接写
<div>hello</div>（单个 VNode） - render 函数里返回字符串
return 'text' - 返回数组：
return [h('span'), h('p')] - 混写：
return ['text', h('i'), null, undefined] - 甚至深层嵌套：
return [[h('a'), [h('b')]], h('c')]
这些输入在类型和结构上差异很大，但虚拟 DOM 的 diff 和挂载流程只接受扁平、非空、全是 VNode 的数组。normalizeChildren 就是这个“翻译官”——把千奇百怪的输入，规整成标准的 VNode[]。
它做了哪些具体规范化？
核心逻辑包括：
立即学习“前端免费学习笔记（深入）”；
-
字符串/数字 → 创建文本 VNode：如
'hello'转为{ type: Text, children: 'hello' } - null / undefined / boolean → 忽略（跳过）：不生成任何节点，避免渲染空占位
- 数组 → 递归扁平化 + 过滤：对每一项再次 normalize（支持多层嵌套），并剔除 falsy 值
- 单个 VNode → 包装成长度为 1 的数组：保证统一返回数组类型，便于后续遍历
-
Fragment（
Symbol.for('v-fgt')）→ 展开其children：Vue 3 中 Fragment 不再是真实节点，它的子节点需透出参与 diff
在哪里被调用？
主要出现在两个地方：
-
创建 VNode 时：比如
h(Component, props, children)或createElementVNode内部，会立即对传入的children参数调用normalizeChildren -
编译后的 render 函数中：模板编译生成的
render()函数，会对插槽内容、动态子节点等自动包裹一层 normalize
注意：它只在**运行时**起作用（Vue 3 的编译时优化会尽量提前归一化，减少运行时开销）；且仅处理“子节点”，不涉及 props、指令等其他字段。
开发者需要注意什么？
大多数情况下你不需要手动调用它——Vue 已封装好。但理解它有助于排查问题：
- 如果 render 函数返回了
[null, h('div')]，实际渲染只有<div>（null被过滤） - 写 JSX 时
{list.map(item => <li>{item}</li>)}没问题，因为map返回数组，会被 normalize 成 VNode 列表 - 但若误写
{list.map(...).filter(...)}后可能含undefined，仍会被安全过滤，不会报错 - 自定义 render 函数中若手动拼接 children，建议始终返回数组或字符串，避免传入原始对象或函数——那些无法被 normalize，会抛错
本质上，它是 Vue “宽容输入、严格输出”设计哲学的体现：让用户写得自由，框架内部保持结构可控。
