// 7 的二进制： 00000111 // 5 的二进制： 00000101 // 按位与运算：逐位比较，全1才1// 00000111 // & 00000101 // ---------// 00000101 console.log; // 输出：5

在 Vue3 中，按位与常用在 “判断某个标志是否存在”。

export enum ShapeFlags { // 基础元素与组件类型 ELEMENT = 1, // FUNCTIONAL_COMPONENT = 1 < 1, // STATEFUL_COMPONENT = 1 < 2, // // 子节点类型 TEXT_CHILDREN = 1 < 3, // ARRAY_CHILDREN = 1 < 4, // SLOTS_CHILDREN = 1 << , // (插槽子节点, ⁵) // TELEPORT = 1 << , // (Teleport 组件, ⁶) SUSPENSE = 1 << , // (Suspense 组件, ⁷) // Keep-alive 相关 COMPONENT_SHOULD_KEEP_ALIVE = 1 << , // (需 keep-alive 缓存, ⁸) COMPONENT_KEPT_ALIVE = 1 << , // (Yi keep-alive 缓存, ⁹) // COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT, }

设计思想例如1 <<  的结果是 ，这意味着 “文本子节点”标志只占用二进制的第 位。这种设计使得每个标志dou像身份证上的不同字段，各自独立，为后续实现 “一个 VNode 拥有多个身份”提供了可Neng。

//7的二进制:00000111//5的二进制:00000101//按位或运算:逐位比较,有 就 //00000111 | //00000101 --------- //00000111 console.log( //7 | 5);// 输出： 7

Vue3 中，按位或常用在 “ 给 VNode 组合多个类型标志”（比如同时标记 “ 普通元素” 和 “ 文本子节点”）。

这就像用一把有 bug 的锁，明明钥匙对了却打不开门 —— 原码显然无法满足计算机的减法需求。

补码彻底解决了减法问题，也是计算机实际存储数字的方式。它的规则hen简单：负数的补码 = 反码 + 。我们Zui后一次计算 + ：

function processVNode(vnode: VNode, parentComponent: ComponentInternalInstance) { const { shapeFlag } = vnode; if ( shapeFlag & ShapeFlags.ELEMENT ) { processElement(vnode, parentComponent); } if ( shapeFlag & ShapeFlags.COMPONENT ) { processComponent(vnode, parentComponent); } if ( shapeFlag & ShapeFlags.TEXT_CHILDREN ) { processTextChildren; } }

掌握了位运算的基础，我们终于Ke以 “走进” Vue源码，kankan这些 “ 二进制魔法” 是如何在实际场景中发挥作用的。Vue源码中的位运算主要集中在 个模块，每个模块dou有明确的优化目标。

Hello~大家好。我是秋天的一阵风

我们日常生活中习惯用 “-” 的十进制计数，但在计算机的世界里只有 “ ”和 “ ”组成的二进制才是 “通用语言”。在 JavaScript 中，实现这两种 “ 语言” 的转换，只需要一个简单的 toString 方法。

//23的二进制console.log( //23.toString( //2));// 输出： "10111"

规则：两个二进制位不同时结果是 ；相同时是 。它的作用像 “ 比较器”，Neng帮我们判断两个数字的二进制差异，也Neng用在简单加密场景。 //7的二进制:0111//5的二进制:0101//按位异或运算:逐位比较，不同才 ^

咱就是说Vue.js作为一款流行的前端开发框架，以其简洁、高效、易于上手的特点受到了众多开发者的喜爱。

你懂的，本文将深入探讨Vue框架的高效运算技巧，帮助开发者提升前端开发效率。

害，说白了ShapeFlags 就是 Vue用来给 VNode 打标签的工具。

通过这些位运算，VueKe以高效判断每个节点需要geng新哪些部分，避免了复杂的条件判断，代码既简洁又高效。.

规则：把二进制位向左移动 n 位，右边补 。比如 << 就是 * ²：