在阅读 vue3 patch函数源码的时候，判断的场景出现了大量的 PatchFlag，出于好奇的心理得出如下结论：
patchflag 优化判断性能
patch函数的主要职责就是判断Vnode的节点类型（打上patchFlag标志），然后调用对应类型的Vnode处理方式，进行更细致的patch（最后进行render渲染）。
其中patchFlag用于标识编译优化信息，可以理解为对虚拟节点VNode的属性进行描述的标志。根据patchFlag判断出需要更新的内容，实现靶向更新。
vue3采用了位运算优化判断性能，因 CPU 中有直接对应位操作的指令，提升判断效率更高。我们在大量判断的场景可以借鉴patchflag的解决方案。
ini
复制代码
let skills = 0;
const SKILLS = {
CSS: 1 ,
JS: 1 << 1,
HTML: 1 << 2,
WEB_GL: 1 << 3
}
skills = skills | SKILLS.JS;
if (skills & SKILLS.JS) {
// CODE
}
位运算枚举
如何理解这段代码？
在 JavaScript 中，整数存储在 4 个字节中，即 32 位。第一个代表正负，后面的31代表数字。当我们用二进制表示 1 , 1 << 2 时，它们看起来像这样：
1 << 2 字节位置
我们定义的枚举变量只有一个二进制格式的 1 ，并且占据不同的位置。当我们添加枚举选项时，我们使用 skills | skill。假设现在我们需要添加的枚举是SKILLS.JS，那么在执行过程中，就是：
skills | skill 时的字节位置
我们可以发现，在skills中，SKILLS.JS 对应的位置会变成 1。
这样我们可以通过查看 skills & SKILLS.JS 的结果是否为0来判断技能中是否存在 SKILLS.CSS 。在业务开发中参考这个技巧优化判断效率。
性能测试：
作者：用户9554031282302
链接：juejin.cn/post/723698…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
