第vue源碼解讀子節(jié)點優(yōu)化更新目錄前言優(yōu)化前存在的問題優(yōu)化策略分析源碼解析小結

前言

Vue中更新節(jié)點，當新VNode和舊VNode都是元素節(jié)點且都有子節(jié)點時，Vue會循環(huán)對比新舊VNode的子節(jié)點數(shù)組，然后根據(jù)不同情況做不同處理。

雖然這種方法能解決問題，但是當更新子節(jié)點特別多時，循環(huán)算法的時間復雜度就會很高，所以Vue對此進行了優(yōu)化。

優(yōu)化前存在的問題

現(xiàn)在有新的newChildren數(shù)組和舊的oldChildren數(shù)組：

newChildren=['a','b','c','d'];

oldChildren=['a','b','c','e'];

按照之前的解決方案：先循環(huán)newChildren數(shù)組，把第一個節(jié)點與oldChildren里的子節(jié)點逐一對比，再根據(jù)情況去處理。如果像上面的代碼一樣，前三個子節(jié)點都沒有變化，只修改了最后一個子節(jié)點，但因為循環(huán)查找，還是要循環(huán)16次才能發(fā)現(xiàn)，所以前面做的15次循環(huán)全是無用功。

優(yōu)化策略分析

Vue的策略是不按照循序去循環(huán)newChildren和oldChildren這兩個數(shù)組，而是先去比較特殊位置的子節(jié)點，比如：

把newChildren數(shù)組里的第一個未處理子節(jié)點和oldChildren數(shù)組的第一個未處理子節(jié)點做對比，如果相同，就更新節(jié)點。如果不同，把newChildren數(shù)組里最后一個未處理子節(jié)點和oldChildren數(shù)組里最后一個未處理子節(jié)點做比對，如果相同，就更新節(jié)點。如果不同，把newChildren數(shù)組里最后一個未處理子節(jié)點和oldChildren數(shù)組里第一個未處理子節(jié)點做比對，如果相同，就更新節(jié)點。如果不同，把newChildren數(shù)組里第一個未處理子節(jié)點和oldChildren數(shù)組里最后一個未處理子節(jié)點做比對，如果相同，就更新節(jié)點。如果四種情況試完如果還不同，就按照之前循環(huán)的方式來查找節(jié)點。

四種情況分別分別被稱作：

不相同才往后繼續(xù)。

新前與舊前如果相同，直接更新，因為位置也相同，無需移動。新后與舊后如果相同，直接更新，因為位置也相同，無需移動。新后與舊前如果相同，更新，但因為位置不同，所以需要移動位置新前與舊后如果相同，更新，但因為位置不同，所以需要移動位置

如果上面的情況都不滿足，再通過之前的循環(huán)方式查找

源碼解析

從上面的優(yōu)化策略中，知道對比子節(jié)點是先對比特殊位置的子節(jié)點，對比成功就進行更新處理，也就是說有可能處理第一個，也有可能是處理最后一個，所以在循環(huán)的時候就不可能只是從前往后循環(huán)，而是從兩邊向中間循環(huán)。

首先定義四個變量

newStartIdx：新子節(jié)點數(shù)組里開始位置的下標；newEndIdx：新子節(jié)點數(shù)組里結束位置的下標；oldStartIdx：舊子節(jié)點數(shù)組里開始位置的下標；oldEndIdx：舊子節(jié)點數(shù)組里結束位置的下標；

在循環(huán)的時候，每處理一個節(jié)點，就將下標向圖中箭頭的方向移動一個位置，newStartIdx和oldStartIdx往后加1，newEndIdx和oldEndIdx往前減1。

理解了這個概念后，就可以解析源碼了:

定義需要的變量

functionupdateChildren(parentElm,oldCh,newCh,insertedVnodeQueue,removeOnly){

letoldStartIdx=0//oldChildren開始索引

letoldEndIdx=oldCh.length-1//oldChildren結束索引

letoldStartVnode=oldCh[0]//oldChildren中所有未處理節(jié)點中的第一個

letoldEndVnode=oldCh[oldEndIdx]//oldChildren中所有未處理節(jié)點中的最后一個

letnewStartIdx=0//newChildren開始索引

letnewEndIdx=newCh.length-1//newChildren結束索引

letnewStartVnode=newCh[0]//newChildren中所有未處理節(jié)點中的第一個

letnewEndVnode=newCh[newEndIdx]//newChildren中所有未處理節(jié)點中的最后一個A

如果oldStartVNode不存在，則跳過，將oldStartIdx加1，對比下一個

while(oldStartIdx=oldEndIdxnewStartIdx=newEndIdx){

if(isUndef(oldStartVnode)){

oldStartVnode=oldCh[++oldStartIdx];

如果oldEndVnode不存在，則跳過，將oldEndIdx減1，比對前一個

elseif(isUndef(oldEndVnode)){

oldEndVnode=oldCh[--oldEndIdx];

如果新前與舊前節(jié)點相同，就把兩個節(jié)點進行patch更新，同時oldStartIdx和newStartIdx都加1，后移一個位置

elseif(sameVnode(oldStartVnode,newStartVnode)){

patchVnode(oldStartVnode,newStartVnode,insertedVnodeQueue)

oldStartVnode=oldCh[++oldStartIdx]

newStartVnode=newCh[++newStartIdx]

如果新后與舊后節(jié)點相同，就把兩個節(jié)點進行patch更新，同時oldEndIdx和newEndIdx都減1，前移一個位置

elseif(sameVnode(oldEndVnode,newEndVnode)){

patchVnode(oldEndVnode,newEndVnode,insertedVnodeQueue)

oldEndVnode=oldCh[--oldEndIdx]

newEndVnode=newCh[--newEndIdx]

如果新后與舊前節(jié)點相同，先把兩個節(jié)點進行patch更新，然后把舊前節(jié)點移動到oldChilren中所有未處理節(jié)點之后，最后把oldStartIdx加1，后移一個位置，newEndIdx減1，前移一個位置

elseif(sameVnode(oldStartVnode,newEndVnode)){

patchVnode(oldStartVnode,newEndVnode,insertedVnodeQueue)

canMovenodeOps.insertBefore(parentElm,oldStartVnode.elm,nodeOps.nextSibling(oldEndVnode.elm))

oldStartVnode=oldCh[++oldStartIdx]

newEndVnode=newCh[--newEndIdx]

如果新前與舊后節(jié)點相同，先把兩個節(jié)點進行patch更新，然后把舊后節(jié)點移動到oldChilren中所有未處理節(jié)點之前，最后把newStartIdx加1，后移一個位置，oldEndIdx減1，前移一個位置

elseif(sameVnode(oldEndVnode,newStartVnode)){//Vnodemovedleft

patchVnode(oldEndVnode,newStartVnode,insertedVnodeQueue)

canMovenodeOps.insertBefore(parentElm,oldEndVnode.elm,oldStartVnode.elm)

oldEndVnode=oldCh[--oldEndIdx]

newStartVnode=newCh[++newStartIdx]

不屬于以上四種情況，就進行常規(guī)的循環(huán)比對patch。

如果oldStartIdx大于oldEndIdx了，那就表示oldChildren比newChildren先循環(huán)完畢，那么newChildren里面剩余的節(jié)點都是需要新增的節(jié)點，把[newStartIdx,newEndIdx]之間的所有節(jié)點都插入到OldChildren中。

if(oldStartIdxoldEndIdx){

refElm=isUndef(newCh[newEndIdx+1])null:newCh[newEndIdx+1].elm

addVnodes(parentElm,refElm,newCh,newStartIdx,newEndIdx,insertedVnodeQueue)

如果newStartIdx大于newEndIdx了，那就表示newChildren比oldChildren先循環(huán)完畢，那么oldChildren里面剩余的節(jié)點都是需要刪除的節(jié)點，把[oldStartIdx,oldEndIdx]之間的所有節(jié)點都刪除

elseif(newStartIdxnewEndIdx){

removeVnodes(parentElm,oldCh,oldStartIdx,oldEndI