1。什么是snabbdom?snabbdom的意思是“速度”,源代码只有200行,用TS编写,使东西模块化。2、snabbdom的h函数是如何工作的?h函数用于生成虚拟节点,也可以嵌套获取虚拟DOM树。3、什么是虚拟DOM?其实它对真实DOM的抽象结果是JS和真实DOM之间的一个缓存。原生DOM运行缓慢。将DOM放在JS层中,以提高渲染性能。3.1。创建虚拟DOM//真实DOMItem1Item2Item3//virtualDOMvarelement={tagName:'ul',//节点标签名props:{//DOM属性,使用一个对象来存储键值对id:'list'},children:[//该节点的子节点{tagName:'li',props:{class:'item'},children:["Item1"]},{tagName:'li',props:{class:'item'},children:["Item2"]},{tagName:'li',props:{class:'item'},children:["Item3"]},]}3.2.patch函数源码流程图//手写patch.jsexportdefaultfunction(oldVnode,newVnode){//1.判断传入的第一个参数是DOM节点还是虚拟节点?if(oldValue.sel==''||oldValue.sel==undefined){//2.传入的第一个参数是一个DOM节点,打包成一个虚拟节点oldValue=vnode(oldValue.tagName.toLowerCase(),{},[],未定义,旧值);}//3.判断oldValue和newValue是否是同一个节点?如果(oldValue.key==newValue.kee&&oldValue.sel==newValue.sel){console.log('是同一个节点');//3.1、判断新旧vnode是否是同一个对象if(oldValue==newValue)return;//3.2、判断新旧vnodes是否有text属性if(newValue.text!=undefined&&(newValue.children==undefined||newValue.children.length==0)){console.log('newvnode有文本属性');//3.2。1.如果新虚拟节点中的文本与旧虚拟节点中的文本不同,则将新文本直接写入旧elm中。如果老榆树里的孩子们马上就会消失。if(newValue.text!=oldValue.text){oldValue.elm.innerHTML=newValue.text;}}else{//新的vnode没有文本属性,但是chidrenconsole.log('Thenewvnodehasnotextattribute');//3.2.2。判断老节点有子节点if(oldValue.children!=undefined&&oldVlaue.children>0){//3.2.2.1.旧节点有子节点letch=newVnode.children[i];//3.2.2.2。再次遍历,看oldValue中有没有相同的节点letisExist=false;for(letj=0;j