vue3Diff算法补丁功能的核心是Diff算法。functionpatch(oldVnode,vnode,parentElm){if(!oldVnode){addVnodes(parentElm,null,vnode,0,vnode.length-1);}elseif(!vnode){removeVnodes(parentElm,oldVnode,0,oldVnode.length-1);}else{if(sameVnode(oldVNode,vnode)){patchVnode(oldVNode,vnode);}else{removeVnodes(parentElm,oldVnode,0,oldVnode.length-1);addVnodes(parentElm,null,vnode,0,vnode.length-1);patch函数的作用主要是将新旧VNode节点的差异更新到视图中,所以传入的参数包括新旧VNode和父节点元素。主要逻辑:首先,当旧节点oldVnode不存在时,相当于用新节点vnode替换缺失的节点,所以直接使用addVnodes将这些节点批量添加到parentElm中。if(!oldVnode){addVnodes(parentElm,null,vnode,0,vnode.length-1);}同理,当新的VNode节点vnode不存在时,相当于删除旧节点,所以直接使用removeVnodes功能批量节点删除。elseif(!vnode){removeVnodes(parentElm,oldVnode,0,oldVnode.length-1);}最后一种情况,当旧节点oldVnode和新节点vnode同时存在时,需要判断是否它们属于同一个节点(同一个节点)。如果是,则执行patchVnode函数比较并更新差异,否则删除旧节点并添加新节点。if(sameVnode(oldVNode,vnode)){patchVnode(oldVNode,vnode);}else{removeVnodes(parentElm,oldVnode,0,oldVnode.length-1);addVnodes(parentElm,null,vnode,0,vnode.length-1);}sameVnodefunctionsameVnode(){return(a.key===b.key&&a.tag===b.tag&&a.isComment===b.isComment&&(!!a.data)===(!!b.data)&&sameInputType(a,b))}functionsameInputType(a,b){if(a.tag!=='输入')returntrueleticonsttypeA=(i=a.data)&&(i=i.attrs)&&i.typeconsttypeB=(i=b.data)&&(i=i.attrs)&&i.type返回typeA===typeB}sameVnode其实很简单,只有当key,tag,isComment(是否是注释节点),data同时定义(或不??定义),tag类型时type相同是input(部分浏览器不支持动态修改类型,所以被当成不同类型)即Can。patchVnode参考文章answershuto/VueDemo
