【Vue3源码学习】— CH3.2 VNode解析(下)

VNode解析—下

4. normalizeChildren
- 4.1 源码解析
- 4.2 位运算符 |= 的应用
- - 4.2.1 按位或（|）
  - 4.2.2 赋值
  - 4.2.3 使用场景
  - 4.2.4 源码中`vnode.patchFlag |= PatchFlags.DYNAMIC_SLOTS`说明
- 4.3 `;(children as RawSlots)._ = SlotFlags.STABLE` 说明
5. Vue 应用的实例化和挂载流程
- 5.1 Vue 项目结构
- - app.vue
  - main.js
- 5.2 初始化和挂载
- 5.3 调用 createVNode
- 5.4 VNode 的创建
- 5.5 渲染和更新
- 5.6 结果
6. 小结
- 6.1 关键概念
- - VNode 的本质
  - 更新优化
  - 跨平台能力
- 6.2 VNode 创建过程
- - 属性初始化
  - 递归处理子元素
  - 处理 shapeFlag
  - 处理 patchFlag
  - 类型处理
- 6.3 性能和灵活性

4. normalizeChildren

normalizeChildren 函数的主要目的是规范化 VNode 的子元素，确保它们以适合 Vue 处理的格式存储。这对处理多种子节点类型（如数组、单个节点、插槽或文本）至关重要。此外，该函数还处理了传递给组件的插槽和 Teleport 组件的特殊情况。

4.1 源码解析

/*** 参数说明* vnode: 当前虚拟节点。* children: 可能是数组、对象、函数、字符串或其他格式的子节点。*/
export function normalizeChildren(vnode: VNode, children: unknown) {let type = 0const { shapeFlag } = vnode/*** 初始化和类型判断：* 判断 children 的数据类型，并据此设置 type 变量，该变量将用于更新 vnode.shapeFlag。*/if (children == null) {// 子节点为空，直接返回children = null} else if (isArray(children)) {/*** 数组类型的子节点:* 如果 children 是数组，则设置类型为 ShapeFlags.ARRAY_CHILDREN*/type = ShapeFlags.ARRAY_CHILDREN} else if (typeof children === &#