ShapeFlags 是 Vue3 用位运算快速识别 VNode 类型的静态标志，如 1 表示 ELEMENT、4 表示 STATEFUL_COMPONENT；通过 vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT 即可高效判断类型，与 PatchFlags（描述更新特征）协同实现精准 diff。
ShapeFlags 是 Vue 3 用来快速识别 VNode 类型和结构特征的整数标志，核心作用是**用一次位运算代替多次属性检查或 instanceof 判断**，让渲染器在 patch 阶段能瞬间分发到对应处理逻辑（比如 processElement 或 processComponent），大幅减少运行时开销。
它怎么标识节点“长什么样”？
每个二进制位代表一种固定语义，比如：
- ELEMENT = 1（二进制 0001）→ 普通 HTML 元素，如 <div>
- STATEFUL_COMPONENT = 4（0100）→ 有 setup / data 的组件
- TEXT_CHILDREN = 8（1000）→ children 是字符串
- ARRAY_CHILDREN = 16（10000）→ children 是 VNode 数组
一个 vnode 可以同时具备多个特征。例如：一个有状态组件返回数组子节点，它的 shapeFlag 就是 4 | 16 = 20（二进制 010100）。
为什么位运算判断又快又准？
关键在于按位与（&）操作的原子性——CPU 级别单指令完成，不查原型链、不读对象属性、不调函数：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
- 判断是不是元素：
vnode.shapeFlag & ShapeFlags.ELEMENT→ 结果非零即真 - 判断是不是组件且含插槽：
vnode.shapeFlag & (ShapeFlags.COMPONENT | ShapeFlags.SLOTS_CHILDREN) - 排除文本子节点：
!(vnode.shapeFlag & ShapeFlags.TEXT_CHILDREN)
相比过去靠 typeof vnode.type === 'object' && 'setup' in vnode.type 这类多层判断，位运算是确定性、无副作用、零内存分配的硬核优化。
它和 PatchFlags 有什么区别？
两者都用位运算，但分工明确：
- ShapeFlags 描述“这是什么”——静态身份，创建 vnode 时就定死，整个生命周期不变（如：是组件、是 Fragment、有没有数组子节点）
- PatchFlags 描述“哪里会变”——动态更新线索，由模板编译器生成，告诉 patch 函数只重算 class 或 text，跳过 props 等无关字段
比如一个带 :class 和 {{ msg }} 的 div，它的 shapeFlag 是 ELEMENT | TEXT_CHILDREN（结构身份），patchFlag 是 CLASS | TEXT（更新靶点）。二者配合，构成 Vue 3 渲染流水线的“静态路由 + 动态补丁”双引擎。
