vue3源码中是怎么使用移位的？好像以前我从来没用过首先看下vue3源码中移位的代码上面代码移位之后会有这样的变化，首

首先看下vue3源码中移位的代码

export const enum ShapeFlags {
    ELEMENT = 1
    FUNCTIONAL COMPONENT = 1 << 1.
    STATEFUL COMPONENT = 1 << 2.
    TEXT CHILDREN = 1 << 3，
    ARRAY CHILDREN = 1 << 4，
    SLOTS CHILDREN = 1 << 5，
    TELEPORT = 1 << 6，
    SUSPENSE = 1 << 7,
    COMPONENT SHOULD KEEP ALIVE = 1 << 8，
    COMPONENT KEPT ALIVE = 1 << 9，
    COMPONENT = ShapeFlags.STATEFUL COMPONENT |     ShapeFlags.FUNCTIONAL COMPONENT
}

上面代码移位之后会有这样的变化，首先看下控制台的输出

下面我们说一下移位（指的是二进制的移位）

<< 表示的是左移，

1 二进制是0000 0001
1 << 1 左移1位是 0000 0010 最后得到的十进制数字就是2
1 << 2 左移2位是 0000 0100 最后得到的十进制数字就是4
1 << 3 左移3位是 0000 1000 最后得到的十进制数字就是8
1 << 4 左移4位是 0001 0000 最后得到的十进制数字就是16
。。。。。。后面就不在列举了

>> 表示的是右移，

16 二进制是0001 0000
16 >> 1 右移1位是 0000 1000 最后得到的十进制数字就是8
16 >> 2 右移2位是 0000 0100 最后得到的十进制数字就是4
16 >> 3 右移3位是 0000 0010 最后得到的十进制数字就是2
16 >> 4 右移4位是 0000 0001 最后得到的十进制数字就是1
。。。。。。后面就不在列举了

上面的移位如果我们理解了，我们的实现很容易得到下面的代码

export declare const enum ShapeFlags {
    ELEMENT = 1,
    FUNCTIONAL_COMPONENT = 2,
    STATEFUL_COMPONENT = 4,
    TEXT_CHILDREN = 8,
    ARRAY_CHILDREN = 16,
    SLOTS_CHILDREN = 32,
    TELEPORT = 64,
    SUSPENSE = 128,
    COMPONENT_SHOULD_KEEP_ALIVE = 256,
    COMPONENT_KEPT_ALIVE = 512,
    COMPONENT = 6
}

看到里了，我们可能要想这样有啥用呢？我们接着往下看

这里我们还需要一个知识点就是位运算符“&”和“|”

“&” 运算符

“&”运算符（位与）用于对两个二进制操作数逐位进行比较,如果对应的位都是1，那么得到的结果就是1，如果其中有一个是0，那么就是0，具体看下面图

通过每一位的比较与运算，最终得到一个结果

“|” 运算符

“|”运算符（位与）用于对两个二进制操作数逐位进行比较,如果对应的位都是0，那么得到的结果就是0，如果其中有一个是1，那么就是1，具体看下面图

通过每一位的比较或运算，最终得到一个结果

好了，到这里我们的位运算符“&”和“|”，也学会了。

看一个实际中的列子

足球可以这样表示 0000 1000 十进制 8
橄榄球可以这样表示 0000 0100 十进制 4
乒乓球可以这样表示 0000 0010 十进制 2
网球可以这样表示 0000 0001 十进制 1

小明喜欢足球可以这样表示 0000 1000 十进制 8
小张喜欢橄榄球可以这样表示 0000 0100 十进制 4
小红喜欢乒乓球可以这样表示 0000 0010 十进制 2
小李喜欢网球可以这样表示 0000 0001 十进制 1

让小王喜欢网球和乒乓球的
1 | 2 二进制就是0000 0001 & 0000 0010 结果0000 0011 十进制3

让小孙喜欢网球和橄榄球的
1 | 4 二进制就是0000 0001 & 0000 0100 结果0000 0011 十进制5

我们通过 | 运算符，可以让一个人同时具备两种能力

我们通过 & 运算符，可以来验证一下某个人是否具有某种能力

// 验证小李是否会网球
if(1 & 1){
// 二进制是0000 0001 & 0000 0001 结果位0000 0001 十进制位1 那么说明小李会网球
  // todo
}
// 验证小李是否会乒乓球
if(1 & 2){
// 二进制是0000 0001 & 0000 0010 结果位0000 0000 十进制位0 那么说明小李不会乒乓球
  // todo
}

// 验证小红是否会乒乓球
if(2 & 2){
// 二进制是0000 0010 & 0000 0010 结果位0000 0010 十进制位2 那么说明小李会乒乓球
  // todo
}
// 验证小红是否会足球
if(2 & 2){
// 二进制是0000 0010 & 0000 1000 结果位0000 0000 十进制位0 那么说明小红不会足球
  // todo
}

// 验证小王是否会乒乓球
if(3 & 2){
// 二进制是0000 0011 & 0000 0010 结果位0000 0010 十进制位2 那么说明小王会乒乓球
  // todo
}
// 验证小王是否会足球
if(3 & 2){
// 二进制是0000 0011 & 0000 1000 结果位0000 0000 十进制位0 那么说明小王不会足球
  // todo
}
// 后面以此类推

在vue中主要通过这种形式来判断vNode中是否只是一个元素是否只是文字是否有插槽需要处理等等
今天的文章就写到这里了，喜欢的化可以关注微信公众号：前端就业课。

vue3源码中是怎么使用移位的？好像以前我从来没用过