shapeflags 是 vue 3 中用于静态标识 vnode 类型与结构特征的位标志整数，创建时确定、全程不变，通过按位与运算快速分发渲染逻辑；它与动态更新用的 patchflags 职责分离：“是什么”由 shapeflags 决定，“哪里变”由 patchflags 指导。
ShapeFlags 是 Vue 3 渲染器用来快速识别 VNode 类型和结构特征的一组位标志，本质是一个整数，每个二进制位代表一种固定语义。它不参与更新逻辑，只在创建 vnode 时静态设定，全程不变。
用来快速分发处理逻辑
渲染器在 patch 阶段需要立刻知道“这个 vnode 到底该怎么处理”——是走 processElement 还是 processComponent，抑或是处理 Fragment、Teleport 等特殊节点。ShapeFlags 让这个判断变成一次 CPU 级别的按位与（&）操作：
- vnode.shapeFlag & ShapeFlags.ELEMENT → 非零即为普通 HTML 元素
- vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT → 非零即为有状态组件
- vnode.shapeFlag & (ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT) → 非零即为广义组件
相比过去依赖 typeof type === 'object'、'setup' in type 或 instanceof 的多层判断，位运算是无副作用、零内存分配、确定性的硬优化。
支持组合式类型描述
一个 vnode 常常具备多种特征。比如一个有状态组件返回了数组形式的子节点，它既是组件，又拥有 ARRAY_CHILDREN 结构：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- STATEFUL_COMPONENT = 4（二进制 0100）
- ARRAY_CHILDREN = 16（二进制 10000）
- 组合后 shapeFlag = 4 | 16 = 20（二进制 010100）
后续可同时检测多个特征，例如：
!(vnode.shapeFlag & ShapeFlags.TEXT_CHILDREN) 表示排除文本子节点；
vnode.shapeFlag & (ShapeFlags.COMPONENT | ShapeFlags.SLOTS_CHILDREN) 表示“是组件且含插槽”。
与 PatchFlags 明确分工
两者都用位运算，但职责完全不同：
- ShapeFlags 回答“这是什么”：静态身份，编译期或 createVNode 时确定，如 ELEMENT、STATEFUL_COMPONENT、TELEPORT、SUSPENSE 等
- PatchFlags 回答“哪里会变”：动态更新线索，由模板编译器生成，如 CLASS、TEXT、PROPS，指导 patch 函数跳过未标记字段
例如一个带 :class 和 {{ msg }} 的 div：
– shapeFlag 是 ELEMENT | TEXT_CHILDREN（结构身份固定）
– patchFlag 是 CLASS | TEXT（仅这两处需重算）
二者配合构成“静态路由 + 动态补丁”的双引擎。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
