vue2中的VNode和diff算法怎么使用

{
tag:"span",
data:{
/*指令集合数组*/
directives:[
{
/*v-show指令*/
rawName:"v-show",
expression:"isShow",
name:"show",
value:true,
},
],
/*静态class*/
staticClass:"demo",
},
text:undefined,
children:[
/*子节点是一个文本VNode节点*/
{
tag:undefined,
data:undefined,
text:"Thisisaspan.",
children:undefined,
},
],
};

updateComponent=()=>{
vm._update(vm._render(),hydrating)
}

newWatcher(vm,updateComponent,noop,{
before(){
if(vm._isMounted){
callHook(vm,'beforeUpdate')
}
}
},true/*isRenderWatcher*/)

//src/core/instance/lifecycle.js

Vue.prototype._update=function(vnode:VNode,hydrating?:boolean){
constvm:Component=this
constprevEl=vm.$el
constprevVnode=vm._vnode
vm._vnode=vnode
//初次渲染没有prevVnode，组件更新才会有
if(!prevVnode){
//初次渲染
vm.$el=vm.__patch__(vm.$el,vnode,hydrating,false/*removeOnly*/)
}else{
//更新
vm.$el=vm.__patch__(prevVnode,vnode)
}

//...
}

//src/core/vdom/patch.js

returnfunctionpatch(oldVnode,vnode,hydrating,removeOnly){
//新节点不存在，只有oldVnode就直接销毁，然后返回
if(isUndef(vnode)){
if(isDef(oldVnode))invokeDestroyHook(oldVnode)
return
}

letisInitialPatch=false
constinsertedVnodeQueue=[]
//没有老节点，直接创建，也就是初始渲染
if(isUndef(oldVnode)){
isInitialPatch=true
createElm(vnode,insertedVnodeQueue)
}else{
constisRealElement=isDef(oldVnode.nodeType)
//不是真实dom，并且是相同节点走patch
if(!isRealElement&&sameVnode(oldVnode,vnode)){
//这里才会涉及到diff算法
patchVnode(oldVnode,vnode,insertedVnodeQueue,null,null,removeOnly)
}else{
if(isRealElement){
//...
}

//replacingexistingelement
constoldElm=oldVnode.elm
constparentElm=nodeOps.parentNode(oldElm)

//1.创建一个新节点
createElm(
vnode,
insertedVnodeQueue,
//extremelyrareedgecase:donotinsertifoldelementisina
//leavingtransition.Onlyhappenswhencombiningtransition+
//keep-alive+HOCs.(#4590)
oldElm._leaveCb?null:parentElm,
nodeOps.nextSibling(oldElm)
)

//2.更新父节点占位符
if(isDef(vnode.parent)){
letancestor=vnode.parent
constpatchable=isPatchable(vnode)
while(ancestor){
for(leti=0;i

//src/core/vdom/patch.js

functionsameVnode(a,b){
return(
a.key===b.key&&
a.asyncFactory===b.asyncFactory&&(
(
a.tag===b.tag&&
a.isComment===b.isComment&&
isDef(a.data)===isDef(b.data)&&
sameInputType(a,b)
)||(
isTrue(a.isAsyncPlaceholder)&&
isUndef(b.asyncFactory.error)
)
)
)
}

functionsameInputType(a,b){
if(a.tag!=='input')returntrue
leti
consttypeA=isDef(i=a.data)&&isDef(i=i.attrs)&&i.type
consttypeB=isDef(i=b.data)&&isDef(i=i.attrs)&&i.type
returntypeA===typeB||isTextInputType(typeA)&&isTextInputType(typeB)
}

//src/core/vdom/patch.js

functionpatchVnode(
oldVnode,
vnode,
insertedVnodeQueue,
ownerArray,
index,
removeOnly
){
//两个vnode相同则直接返回
if(oldVnode===vnode){
return
}

if(isDef(vnode.elm)&&isDef(ownerArray)){
//clonereusedvnode
vnode=ownerArray[index]=cloneVNode(vnode)
}

constelm=vnode.elm=oldVnode.elm

if(isTrue(oldVnode.isAsyncPlaceholder)){
if(isDef(vnode.asyncFactory.resolved)){
hydrate(oldVnode.elm,vnode,insertedVnodeQueue)
}else{
vnode.isAsyncPlaceholder=true
}
return
}

/*
如果新旧VNode都是静态的，同时它们的key相同（代表同一节点），
并且新的VNode是clone或者是标记了once（标记v-once属性，只渲染一次），
那么只需要替换componentInstance即可。
*/
if(免费云主机域名isTrue(vnode.isStatic)&&
isTrue(oldVnode.isStatic)&&
vnode.key===oldVnode.key&&
(isTrue(vnode.isCloned)||isTrue(vnode.isOnce))
){
vnode.componentInstance=oldVnode.componentInstance
return
}

leti
constdata=vnode.data
/*调用prepatch钩子*/
if(isDef(data)&&isDef(i=data.hook)&&isDef(i=i.prepatch)){
i(oldVnode,vnode)
}

//获取新老虚拟节点的子节点
constoldCh=oldVnode.children
constch=vnode.children
if(isDef(data)&&isPatchable(vnode)){
for(i=0;i

functionupdateChildren(parentElm,oldCh,newCh,insertedVnodeQueue,removeOnly){
letoldStartIdx=0
letnewStartIdx=0
letoldEndIdx=oldCh.length-1
letoldStartVnode=oldCh[0]
letoldEndVnode=oldCh[oldEndIdx]
letnewEndIdx=newCh.length-1
letnewStartVnode=newCh[0]
letnewEndVnode=newCh[newEndIdx]
letoldKeyToIdx,idxInOld,vnodeToMove,refElm

constcanMove=!removeOnly

if(process.env.NODE_ENV!=='production'){
checkDuplicateKeys(newCh)
}

while(oldStartIdxoldEndIdx，说明老节点比对完了，但是新节点还有多的，
//需要将新节点插入到真实DOM中去，调用addVnodes将这些节点插入即可。
if(oldStartIdx>oldEndIdx){
refElm=isUndef(newCh[newEndIdx+1])?null:newCh[newEndIdx+1].elm
addVnodes(parentElm,refElm,newCh,newStartIdx,newEndIdx,insertedVnodeQueue)
//如果满足newStartIdx>newEndIdx条件，说明新节点比对完了，老节点还有多，
//将这些无用的老节点通过removeVnodes批量删除即可。
}elseif(newStartIdx>newEndIdx){
removeVnodes(oldCh,oldStartIdx,oldEndIdx)
}
}