ShapeFlags位运算标记解析与设计深度解读

虚拟 DOM 的位运算标记——即 Vue 3 中的 ShapeFlags 设计，是一种以整数二进制位高效编码节点类型与特征的底层机制：它用单个数字（如 ELEMENT=1、STATEFUL_COMPONENT=2）的每一位代表一种身份属性，通过按位或组合多重类型、按位与瞬时判断特征，既大幅减少内存占用和字段冗余，又显著提升运行时类型判定速度，更天然适配编译优化，在性能、可维护性与可扩展性之间实现了令人惊叹的精巧平衡。

虚拟 DOM 的位运算标记是 Vue 3 在类型判断效率与内存开销间的精妙平衡，用整数二进制位标识节点身份（如 ELEMENT=1、STATEFUL_COMPONENT=2），通过按位或组合、按位与快速判断，兼顾性能、内存、可扩展性与编译友好性。

虚拟 DOM 的“位运算标记”不是炫技，而是 Vue 3 在类型判断效率与内存开销之间找到的精妙平衡点。它把节点“是什么”这个基础问题，压缩成一个整数，靠二进制每一位代表一种身份特征——比如第 0 位是 1 表示这是个原生元素，第 1 位是 1 表示这是个有状态组件，第 3 位是 1 表示它的子节点是纯文本……多个特征可以同时存在，靠按位或（|）叠加，靠按位与（&）快速提取。

ShapeFlags 是怎么定义节点身份的

Vue 不用一堆布尔字段（isElement、isComponent、hasTextChildren……），而是用一组预设常量，每个都对应唯一一个二进制位：

• ELEMENT = 1 << 0 → 十进制 1 → 二进制 0001：表示原生 DOM 元素，如
  、
• STATEFUL_COMPONENT = 1 << 1 → 十进制 2 → 二进制 0010：表示带响应式逻辑的组件（含 setup 或 data）
• FUNCTIONAL_COMPONENT = 1 << 2 → 十进制 4 → 二进制 0100：函数式组件，无实例、无状态
• TEXT_CHILDREN = 1 << 3 → 十进制 8 → 二进制 1000：children 是字符串，不是数组也不是 null
• ARRAY_CHILDREN = 1 << 4 → 十进制 16 → 二进制 10000：children 是 VNode 数组
• FRAGMENT = 1 << 11 → 十进制 2048 → 二进制 100000000000：对应