博主博客首篇前言计算机内部是一个由0和1组成的二进制世界，我们所有的操作最终都会转化为二进制进行计算和存储。这是因为电子计算机出现的时候，是用电子管来进行状态管理的，它只有“on”和“off”（开和关）两种最基本的状态，这就决定了它最简单计算机用二进制表示数字和数据。实现了，其多功能性在当今的先进技术中仍然是不可替代的。二进制数据是由0和1两位数字表示的数字。它的基数是2，进位规则是“逢二为一”，借位规则是“借一为二”。有趣的特征如果二进制的第零位（最右边）的值为1，那么这个数一定是奇数；如果该位为0，则该数为偶数2?-1转换成二进制为n1；示例：23=7（十进制）=111（二进制）将二进制数的所有位向左移动1结果是将数字乘以二；示例：7<<1等于14；7的二进制值为111，移位后为1110=14正数换算正数换算十进制换算：除以2取余，倒序排列57%2=28余128%2=14remaining014%2=7remaining07%2=3remaining13%2=1remaining11%2=0remaining1结果为(inverted):111001二进制转十进制：取不是的位置号0作为2的次方计算，并将结果相加//111001Math.pow(2,5)+Math.pow(2,4)+Math.pow(2,3)+Math.pow(2,0)===57十进制转二进制：乘以2四舍五入，按正序排列0.375*2=0.750四舍五入00.750*2=1.500四舍五入10.500*2=1.000四舍五入为1的结果为：0.011二进制转十进制：取小数点后不为0的位置数作为2的负次方计算，结果相加//0.011Math.pow(2,-2)+Math.pow(2,-3)===0.375之间的转换负数说到二进制负数，首先要介绍三个名词：原码、反码、补码，因为在计算机内部，负数是以补码的形式存在的。正数是其绝对值转换为二进制；负数的原码是其绝对值转为二进制，然后最高位补1反码：正数的反码对原码为1；原码除符号位的补码：正数与原码一到的补码；负数的倒数就是除符号位外的原码取反，然后二进制加1个十进制（以八进制为例）：-57的绝对值转二进制：111001，最高位取反1：10111001处的符号位取反：11000110的最高位与1：11000111相加，结果为：11000111二进制转十进制，然后返回计算。问题分析有了上面的知识，那么0.1+0.2!==0.3就有了最简单易懂的解释：转换成二进制不能计算，会出现死循环的部分，所以就准确性将丢失。详见为什么0.1+0.2不等于0.3位运算介绍逻辑与：AND，运算符：&当对应的二进制位都为1时，结果为1；例子：1101->13AND1001->9--------------------1001->9判断一个数的奇偶性可以应用这个特性：18&1===1//false,19&1===1//true，原理是因为所有奇数转二进制后最后一位为1，偶数最后一位为0，按位与运算1、结果只有“1”（奇数）和“0”（偶数）两种情况的逻辑或：OR，运算符：|当对应的两个二进制位之一为1时，结果为1；示例：1101->13OR1001->9-----------------1101->13舍入是应用程序之一：functiontoInt(num){returnnum|0}console.log(toInt(3.2))//3console.log(toInt(2.12345))//2逻辑异或：XOR，运算符：^对应的两个二进制位同为0，相差1例子:1101->13XOR1001->9---------------------0100->4这个特性可以用来交换两个变量的值，不用newvariablesvara=10,b=20a^=bb^=aa^=bconsole.log(a,b)//20,10//10=01010//20=10100//a=11110#a的结果^b,其中1是a和b的差//b=01010#b^c的结果，你发现和a一样了吗//a=10100#a^d的结果，你有没有发现b的结果和逻辑非一样：NOT，运算符：~0变成1，1变为0；示例（八位）：NOT1001----------------11110110按位左移：SHL，运算符：<<所有二进制位左移若干位，右边为丢弃。左边补0例子：57:111001------57<<1------运算结果：114:1110010一个简单的乘法技巧：num<<1//num*2num<<2//num*4num<<3//num*8按位右移：SHR，运算符：>>和>>>>>：有符号位移位；所有二进制位右移若干位，右边舍去，补左边符号位>>>：无符号位位移；每个二进制位右移若干位，右边舍去，左边补057：111001------57>>1---------运算result:28:11100一个简单的除法技巧：num>>1//num/2num>>2//num/4num>>3//VUE3.0中的num/8位运算在vue3.0中，有一个vnode元素相关的判断和更新中很多位运算操作//packages/shared/src/shapeFlags.tsexportconstenumShapeFlags{ELEMENT=1,//普通HTML:0000000001FUNCTIONAL_COMPONENT=1<<1,//功能组件:0000000010STATEFUL_COMPONENT=1<<2,//有状态组件:0000000100TEXT_CHILDREN=1<<3,//子节点为纯文本:0000001000ARRAY_CHILDREN=1<<4,//子节点为数组:0000010000SLOTS_CHILDREN=1<<5,//子节点是一个slot:0000100000TELEPORT=1<<6,//0001000000SUSPENSE=1<<7,//0010000000COMPONENT_SHOULD_KEEP_ALIVE=1<<8,//未保持活动状态的有状态组件：0100000000COMPONENT_KEPT_ALIVE=1<<9,//保持活动状态的有状态组件：1000000000COMPONENT=ShapeFlags.STATEFUL_COMPONENT|ShapeFlags.FUNCTIONAL_COMPON//有状态和无状态组件的组合：0000000110}//用于标识节点更新类型：packages/shared/src/patchFlags.ts//还有：packages/shared/src/slotFlags.tscreateVNode创建时一个节点，它会通过shapeFlag标记当前节点类型和它的子节点类型通过位运算对shapeFlag的类型//1.如果标签被标记为元素，则二进制为：0000000001//1.1。如果孩子被标记为纯文本，则二进制变为：0000001001//1.2。如果孩子被标记为数组，则二进制文件变为：0000010001vnode.shapeFlag=vnode.shapeFlag|(isString(children)?ShapeFlags.TEXT_CHILDREN:ShapeFlags.ARRAY_CHILDREN)}returnvnode}function_createVNode(type,props,children){//如果类型为字符串，则当前节点被视为元素节点constshapeFlag=是字符串（类型）？形状Flags.ELEMENT:ShapeFlags.FUNCTIONAL_COMPONENT//简写，实际判断以原代码为准returncreateBaseVNode(type,children,patchFlag,shapeFlag)}在patch阶段，createVNode时创建的shapeFlag会进行逻辑与(&)操作判断标签类型constpatch=(n1,n2)=>{const{type,ref,shapeFlag}=n2switch(type){//...//省略对文本、注释、根节点等的判断.default://根据shapeFlag判断label类型if(shapeFlag&ShapeFlags.ELEMENT){//打包后变成shapeFlag&1processElement()//在处理label的时候，还需要处理它的内部childelements}elseif(shapeFlag&ShapeFlags.COMPONENT){//打包后变成shapeFlag&6processComponent()}elseif(shapeFlag&ShapeFlags.TELEPORT){//打包后变成shapeFlag&64;(类型为typeofTeleportImpl).process()}elseif(__FEATURE_SUSPENSE__&&shapeFlag&ShapeFlags.SUSPENSE){//打包后变成shapeFlag&128;(typeastypeofSuspenseImpl).process()}}}processElement函数会调用mountElement进行元素的初始渲染和内部子元素的判断constmountElement=(vnode)=>{//...略if(shapeFlag&ShapeFlags.TEXT_CHILDREN){//子元素是文本hostSetElementText(el,vnode.childrenasstring)}elseif(shapeFlag&ShapeFlags.ARRAY_CHILDREN){//子元素是数组//mountChildren(vnode.children)//调用patch到重新判断子元素for(leti=0;i
