虚拟 DOM 的位运算标记是 Vue 3 在类型判断效率与内存开销间的精妙平衡，用整数二进制位标识节点身份（如 ELEMENT=1、STATEFUL_COMPONENT=2），通过按位或组合、按位与快速判断，兼顾性能、内存、可扩展性与编译友好性。
虚拟 DOM 的“位运算标记”不是炫技，而是 Vue 3 在类型判断效率与内存开销之间找到的精妙平衡点。它把节点“是什么”这个基础问题，压缩成一个整数，靠二进制每一位代表一种身份特征——比如第 0 位是 1 表示这是个原生元素，第 1 位是 1 表示这是个有状态组件，第 3 位是 1 表示它的子节点是纯文本……多个特征可以同时存在，靠按位或（|）叠加，靠按位与（&）快速提取。
ShapeFlags 是怎么定义节点身份的
Vue 不用一堆布尔字段（isElement、isComponent、hasTextChildren……），而是用一组预设常量，每个都对应唯一一个二进制位：
- ELEMENT = 1 → 十进制 1 → 二进制 0001：表示原生 DOM 元素，如 、
- STATEFUL_COMPONENT = 1 → 十进制 2 → 二进制 0010：表示带响应式逻辑的组件（含 setup 或 data）
- FUNCTIONAL_COMPONENT = 1 → 十进制 4 → 二进制 0100：函数式组件，无实例、无状态
- TEXT_CHILDREN = 1 → 十进制 8 → 二进制 1000：children 是字符串，不是数组也不是 null
- ARRAY_CHILDREN = 1 → 十进制 16 → 二进制 10000：children 是 VNode 数组
- FRAGMENT = 1 → 十进制 2048 → 二进制 100000000000：对应 标签
一个组件节点的 shapeFlag 可能是 2 | 8（即 10），代表它既是 STATEFUL_COMPONENT，又返回纯文本；一个 Teleport 节点可能是 1024 | 16（即 1040），代表它是 TELEPORT，且子节点为数组。这种组合天然支持“多标签共存”，没有歧义，也不需额外字段。
为什么非得用位运算，而不是对象或字符串
关键在运行时高频路径：每次 patch（打补丁）、diff（对比）、create（创建）都要快速识别节点类型。位运算是 CPU 级别指令，单次 & 比较比遍历对象属性、比字符串匹配、甚至比 switch-case 都快得多。
- 内存省：一个 number 比 { isElement: true, isComponent: false, hasArrayChildren: true } 小一个数量级
- 判断快：
vnode.shapeFlag & ShapeFlags.ELEMENT一行代码即可确认是否为元素，无需 if-else 嵌套或 map 查找 - 可扩展：新增类型只需加一个
NEW_TYPE = 1 ，不破坏现有逻辑，也不影响旧节点的 shapeFlag 值 - 编译友好：模板编译阶段就能静态推导出大部分 shapeFlag，运行时几乎零开销
ShapeFlags 和 PatchFlags 的分工很清晰
它们都用位运算，但管的事完全不同：
-
ShapeFlags 回答“它本质上是什么”——结构身份，生命周期内不变。比如一个
组件，不管 props 怎么变，它永远是 STATEFUL_COMPONENT | ARRAY_CHILDREN - PatchFlags 回答“这次更新里哪些部分动了”——动态变化靶点，每次 render 都可能不同。比如同一个组件，这次只改了 class，PatchFlag 就是 CLASS；下次改了 text 和 style，就变成 TEXT | STYLE
这种分层让渲染器能先按 shapeFlag 跳转到对应处理分支（比如走 componentMount 流程），再按 patchFlag 精准更新内部字段，避免无谓的全量 diff。
设计背后的底层哲学
Vue 3 的位运算标记不是为了“显得高级”，而是对“确定性”和“可预测性”的极致追求。所有 shapeFlag 常量在编译期就固定，所有组合逻辑由位运算保证无冲突，整个渲染链路中，类型判断不再是运行时的模糊猜测，而是一次确定的数学运算。这种把抽象语义映射为底层比特的操作，让框架既保持开发者友好的声明式表达，又在机器层面跑得足够轻、足够稳。
