ShapeFlags 是 Vue3 用位运算快速识别 VNode 类型的静态标志，如 1 表示 ELEMENT、4 表示 STATEFUL_COMPONENT；通过 vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT 即可高效判断类型，与 PatchFlags（描述更新特征）协同实现精准 diff。
ShapeFlags 是 Vue3 中用于快速识别 VNode 类型的位标志集合，本质是用一个数字的二进制位来“打包”多种类型信息，让运行时能用一次位运算（如 &）瞬间判断节点属于哪一类——比如是不是组件、有没有数组子节点、是否需要 keep-alive 等。它不参与更新逻辑，只在创建 vnode 时静态设定，全程不变，是典型的编译期 + 运行期协同优化。
ShapeFlags 解决什么问题？
没有 ShapeFlags 时，Vue 要判断一个 vnode 是普通元素还是有状态组件，可能得层层 instanceof、typeof、甚至检查是否存在 setup 或 render 方法——既慢又容易漏判。而 ShapeFlags 把类型信息“编码进数字”，比如：
- 1（二进制 0001） 表示 ELEMENT（普通 HTML 元素）
- 4（二进制 0100） 表示 STATEFUL_COMPONENT（有状态组件）
- 8（二进制 1000） 表示 TEXT_CHILDREN（文本子节点）
一个 vnode 可以同时是组件 + 数组子节点，那就设为 ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.ARRAY_CHILDREN，即 4 | 16 = 20（二进制 010100）。后续只需 vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT 就能立刻得出“是组件”，无需分支判断或属性遍历。
它是怎么用位运算实现高效判断的？
关键在于“按位与（&）”的特性：只有对应位都为 1，结果该位才为 1。所以：
立即学习“前端免费学习笔记（深入）”；
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 判断是否为元素：
vnode.shapeFlag & ShapeFlags.ELEMENT→ 非零即真 - 判断是否同时为组件且含插槽子节点：
vnode.shapeFlag & (ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.SLOTS_CHILDREN) - 判断是否不是文本子节点：
!(vnode.shapeFlag & ShapeFlags.TEXT_CHILDREN)
这些操作都是 CPU 级别的单指令，比对象属性查找、函数调用快几个数量级，尤其在 diff 循环中高频执行时，累积收益非常可观。
和 PatchFlags 有什么区别？
两者都用位运算，但职责不同：
- ShapeFlags 描述 vnode 的静态结构身份（是什么），编译时确定，整个生命周期不变
- PatchFlags 描述 vnode 的动态更新特征（哪里会变），由模板编译器根据绑定表达式生成，告诉 patch 函数“只需更新 class、跳过 props”这类靶向指令
比如一个带 :class 和 {{ msg }} 的 div，它的 shapeFlag 是 ELEMENT | TEXT_CHILDREN（结构固定），patchFlag 是 CLASS | TEXT（仅这两处需重算）。二者配合，让 Vue 在“知道它是什么”的前提下，再“精准知道改什么”，双层过滤，避免全量 diff。
实际开发中需要注意什么？
绝大多数情况下你不需要手动操作 ShapeFlags —— 它是框架内部机制。但理解它有助于读懂源码、排查渲染异常，比如：
- 自定义渲染器或手写 render 函数时，若 createVNode 传入 type 类型模糊（比如传了 null 或无效对象），shapeFlag 可能误设，导致组件不挂载
- 调试时看到 vnode.shapeFlag 值为 21（二进制 10101），可快速拆解：16（SLOTS_CHILDREN）+ 4（STATEFUL_COMPONENT）+ 1（ELEMENT）→ 是一个含插槽的、有状态的、但被错误标记为 ELEMENT 的 vnode，说明类型推导出错
- 注意不要把 ShapeFlags 和用户传入的 props.key、v-if 的条件值混淆——前者是框架元数据，后者是业务数据
位运算是 Vue3 性能底座的关键一环，它用极小的内存开销（一个数字字段）换来了极高的类型判断效率，是“用空间换时间”在前端框架中的典型落地。
