听说vue3使用位运算进行类型判断？_vue & 按位于类型判断-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41402809/article/details/124946873

本文探讨了Vue3中使用位运算进行类型判断的逻辑，对比了位运算与传统对象法在性能和可读性上的差异。通过位运算，可以高效地组合和检查多个类型标志，为代码优化提供了新思路。虽然在实际开发中可读性可能更重要，但这种技术值得了解和学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

最近在看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