前言
在前面两篇文章中，我们已经实现了createApp，render函数等，可以将数据渲染到页面上。
推荐阅读：
在渲染逻辑的实现中，patch方法里区分了vnode的类型element和component，又在节点挂载mountElement方法中区分子节点children的类型string和array。
在实现类型判断时，此前的方式是直接通过typeof判断，这里的逻辑可以重构抽离，将所有的节点类型定义成一个常量，在 Vue 源码中使用了位运算更加高效。
位运算
先回顾一下基础知识，位运算并不是 JavaScript 特有概念，而是隶属编程技术。从现代计算机中所有的数据二进制的形式存储在设备中。即 0、1 两种状态，计算机对二进制数据进行的运算(+、-、*、/)都是叫位运算，即将符号位共同参与运算的运算。
这里罗列 3 个接下来shapeFlags实现涉及到的位运算的操作符号
| 符号 | 描述 | 运算规则 |
|---|---|---|
| & | 与 | 两个位都为1时，结果才为1 |
| | | 或 | 两个位都为0时，结果才为0 |
| << | 左移 | 各二进位全部左移若干位，高位丢弃，低位补0 |
举个栗子
[x]..toString('2')可以获取数值的二进制形式，1 的二进制就是 0001，不足会补充 0 ；1 << 1就是表示二进制 0001 左移 1 位，即 0010 ，也就是计算得到的 2 。1 << 2就是 0001 左移 2 位，即 0100 。
区分vnode类型
shared文件夹下新家文件shapeFlags.ts，定义一个枚举类型，
这里将目前需要判断的节点类型区分为 4 种：
- 节点类型为字符串，即表示为
element，值为 1 ，二进制为 0001 - 节点类型为对象类型时，表示为
stateful_component，值为 2 ，二进制为 0010 - 子节点类型为字符串，表示纯文本
text_children，值为 4 ，二进制为 0100 - 子节点类型为数组，表示为
array_children，值为 8，二进制为 1000
使用位运算进行判断的基本思想：
假设当前vnode节点的类型是字符串，也就是我们定义的element，是 0001 ，当在判断时，只需要再用 0001 进行与运算 ，也就是 &，0001 & 0001等于 1，即为真；假设当前这个vnode不是 0001，而是个stateful_component，也就是0010 ，0010 & 0001等于 0，即为假。
清楚了判断逻辑，那前提是需要赋值修改，就是需要在vnode中添加一个属性shapeFlags，当默认是 0000 ，vnode为element时，需要将shapeFlags修改成 0001，使用或运算 |。
举个栗子
默认是 0001，想要修改成 0011，即使用 0010 进行或运算。
使用位运算进行修改的基本思想：
初始时设置shapeFlags，判断vnode的type类型，字符串还是对象，设置成定义的常量值；在判断子节点children时，使用或运算，将当前的shapeFlags值和常量值中 text_children，array_children进行或运算。
实现
shapeFlags修改
在vnode.ts中，
shapeFlags判断
在renderer.ts中，
验证
执行yarn build打包，验证 example 中测试代码，App.js中代码
运行结果：
推荐阅读：