vue原始碼解讀子節點優化更新

2022-08-20 22:00:13

前言

Vue中更新節點，當新 VNode 和舊 VNode 都是元素節點且都有子節點時，Vue會迴圈對比新舊 VNode 的子節點陣列，然後根據不同情況做不同處理。

雖然這種方法能解決問題，但是當更新子節點特別多時，迴圈演演算法的時間複雜度就會很高，所以Vue對此進行了優化。

優化前存在的問題

現在有新的 newChildren 陣列和舊的 oldChildren 陣列：

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

按照之前的解決方案：先回圈 newChildren 陣列，把第一個節點與 oldChildren 裡的子節點逐一對比，再根據情況去處理。如果像上面的程式碼一樣，前三個子節點都沒有變化，只修改了最後一個子節點，但因為迴圈查詢，還是要回圈16次才能發現，所以前面做的15次迴圈全是無用功。

優化策略分析

Vue的策略是不按照循序去迴圈 newChildren 和 oldChildren 這兩個陣列，而是先去比較特殊位置的子節點，比如：

把 newChildren 陣列裡的第一個未處理子節點和 oldChildren 陣列的第一個未處理子節點做對比，如果相同，就更新節點。
如果不同，把 newChildren陣列裡最後一個未處理子節點和 oldChildren 陣列裡最後一個未處理子節點做比對，如果相同，就更新節點。
如果不同，把 newChildren陣列裡最後一個未處理子節點和 oldChildren 陣列裡第一個未處理子節點做比對，如果相同，就更新節點。
如果不同，把 newChildren陣列裡第一個未處理子節點和 oldChildren 陣列裡最後一個未處理子節點做比對，如果相同，就更新節點。
如果四種情況試完如果還不同，就按照之前回圈的方式來查詢節點。

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

不相同才往後繼續。

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

如果上面的情況都不滿足，再通過之前的迴圈方式查詢

原始碼解析

從上面的優化策略中，知道對比子節點是先對位元殊位置的子節點，對比成功就進行更新處理，也就是說有可能處理第一個，也有可能是處理最後一個，所以在迴圈的時候就不可能只是從前往後迴圈，而是從兩邊向中間迴圈。

首先定義四個變數

newStartIdx：新子節點陣列裡開始位置的下標；
newEndIdx：新子節點陣列裡結束位置的下標；
oldStartIdx：舊子節點陣列裡開始位置的下標；
oldEndIdx：舊子節點陣列裡結束位置的下標；

在迴圈的時候，每處理一個節點，就將下標向圖中箭頭的方向移動一個位置，newStartIdx和 oldStartIdx 往後加1，newEndIdx和 oldEndIdx往前減1。

理解了這個概念後，就可以解析原始碼了:

定義需要的變數

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    let oldStartIdx = 0               // oldChildren開始索引
    let oldEndIdx = oldCh.length - 1   // oldChildren結束索引
    let oldStartVnode = oldCh[0]        // oldChildren中所有未處理節點中的第一個
    let oldEndVnode = oldCh[oldEndIdx]   // oldChildren中所有未處理節點中的最後一個

    let newStartIdx = 0               // newChildren開始索引
    let newEndIdx = newCh.length - 1   // newChildren結束索引
    let newStartVnode = newCh[0]        // newChildren中所有未處理節點中的第一個
    let newEndVnode = newCh[newEndIdx]  // newChildren中所有未處理節點中的最後一個A
}

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

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx];
    }
}

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

else if (isUndef(oldEndVnode)) {
    oldEndVnode = oldCh[--oldEndIdx];
}

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

else if (sameVnode(oldStartVnode, newStartVnode)) {
    patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
    oldStartVnode = oldCh[++oldStartIdx]
    newStartVnode = newCh[++newStartIdx]
}

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

else if (sameVnode(oldEndVnode, newEndVnode)) {
    patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
    oldEndVnode = oldCh[--oldEndIdx]
    newEndVnode = newCh[--newEndIdx]
}

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

else if (sameVnode(oldStartVnode, newEndVnode)) {
    patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
    canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
    oldStartVnode = oldCh[++oldStartIdx]
    newEndVnode = newCh[--newEndIdx]
}

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

else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
    patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
    canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
    oldEndVnode = oldCh[--oldEndIdx]
    newStartVnode = newCh[++newStartIdx]
}

不屬於以上四種情況，就進行常規的迴圈比對patch。

如果oldStartIdx大於oldEndIdx了，那就表示oldChildren比newChildren先回圈完畢，那麼newChildren裡面剩餘的節點都是需要新增的節點，把[newStartIdx, newEndIdx]之間的所有節點都插入到OldChildren中。

if (oldStartIdx > oldEndIdx) {
    refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
    addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
}

如果newStartIdx大於newEndIdx了，那就表示newChildren比oldChildren先回圈完畢，那麼oldChildren裡面剩餘的節點都是需要刪除的節點，把[oldStartIdx, oldEndIdx]之間的所有節點都刪除

else if (newStartIdx > newEndIdx) {
    removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
}

小結

分析了迴圈更新子節點存在的效能問題，資料量大時，時間複雜度高。
分析Vue中的優化策略，先對位元殊位置的子節點，分別是：新前與舊前、新後與舊後、新後與舊前、新前與舊後。如果都不相同，在通過迴圈遍歷對比。
理解原始碼，通過原始碼解析，在腦海中繪製一條清晰的思路線。

參考自Vue原始碼系列-Vue中文社群

以上就是vue原始碼解讀子節點優化更新的詳細內容，更多關於Vue子節點更新的資料請關注it145.com其它相關文章！

vue原始碼解讀子節點優化更新

目錄

前言

優化前存在的問題

優化策略分析

原始碼解析

小結

熱門文章