听说vue3使用位运算进行类型判断？

背景

最近在看vue3的源码，发现vue3中有一个块的逻辑是判断 ELEMENT ，STATEFUL_COMPONENT ，TEXT_CHILDREN，ARRAY_CHILDREN这四种类型中的某种是否存在；但是它使用的是位运算来判断的，对此，进行一些个人的解读，欢迎指正。

常规方法

对于这种，我们通常肯定是使用对象来进行判断，比如

export const type = {
  ELEMENT: false,
  STATEFUL_COMPONENT: true,
  TEXT_CHILDREN: false,
  ARRAY_CHILDREN: true
}

// 通过对象调用，来判断该类型是否存在
if(type.STATEFUL_COMPONENT){
    ...
}else if(type.ELEMENT){
    ...
}

但是vue3中使用了一种新方法——位运算，来判断类型；

位运算判断

export const enum ShapeFlags {
  ELEMENT = 1, // 0001
  STATEFUL_COMPONENT = 1 << 1, // 0010
  TEXT_CHILDREN = 1 << 2, //0100
  ARRAY_CHILDREN = 1 << 3 // 1000
}

通过或运算来进行 改操作

比如： 0001 ｜ 0010 => 0011
最后两位都是1，就表示该类型既是ELEMENT类型，也是STATEFUL_COMPONENT

let a = 0; // 初始值
a  = a | ShapeFlags.ELEMENT;
a  = a | ShapeFlags.STATEFUL_COMPONENT

// 此时 a的类型就是 ELEMENT 和 STATEFUL_COMPONENT 两种

通过与运算来进行 查操作

比如： 0001 & 0010 => 0000
表示该类型不是0010，也就不是STATEFUL_COMPONENT类型;

比如： 0010 & 0010 => 0010
表示该类型不是0010，也就不是STATEFUL_COMPONENT类型

if(0001 & ShapeFlags.STATEFUL_COMPONENT){ //  false
  console.log('1')
}else if( 0010 & ShapeFlags.STATEFUL_COMPONENT){ true
  console.log('2')
} 

// 最终结果 => 2

两种方法的对比

	性能	可读性
位运算	✅
对象法		✅

个人觉得，在真正开发上，肯定是优先考虑可读性；
但是这种位运算来进行类型判断的思想，也给了我们一种代码优化的方向