vue Diff 演算法的執行過程

2021-10-07 22:22:48 字數 1061 閱讀 7694

patchvnode 這個函式做了以下事情:

其他幾個點都很好理解,我們詳細來講一下updatechildren,**如下:

updatechildren

(parentelm, oldch, newch)

else

if(oldendvnode ==

null

)else

if(newstartvnode ==

null

)else

if(newendvnode ==

null

)elseif(

samevnode

(oldstartvnode, newstartvnode)

)elseif(

samevnode

(oldendvnode, newendvnode)

)elseif(

samevnode

(oldstartvnode, newendvnode)

)elseif(

samevnode

(oldendvnode, newstartvnode)

)else

idxinold = oldkeytoidx[newstartvnode.key]if(

!idxinold)

else

else

newstartvnode = newch[

++newstartidx]}}

}if(oldstartidx > oldendidx)

else

if(newstartidx > newendidx)

}

當 oldstartidx <= oldendidx && newstartidx <= newendidx 時,執行如下迴圈判斷:

當上述 9 個判斷執行完後,oldstartidx 大於 oldendidx,則將 vnode 中多餘的節點根據 newstartidx 插入到 dom 中去;newstartidx 大於 newendidx,則將 dom 中在區間 【oldstartidx, oldendidx】的元素節點刪除

diff演算法 Vue diff演算法比較邏輯

diff演算法的原始碼實現比較複雜。這裡先對演算法過程和作用進行詳細梳理。diff 的出現,就會為了減少更新量,找到最小差異部分dom,只更新差異部分dom就好了。這樣消耗就小一些。資料變化一下,沒必要把其他沒有涉及的沒有變化的dom 也替換了。總之一句話 頻繁操作dom比較耗時,先通過diff演算...

簡述 Diff 演算法的執行過程

diff演算法是一種通過同層的樹節點進行比較的高效演算法,避免了對樹進行逐層搜尋遍歷,所以時間複雜度只有 o n diff演算法有兩個比較顯著的特點 1 比較只會在同層級進行,不會跨層級比較。2 在diff比較的過程中,迴圈從兩邊向中間收攏。首先定義 oldstartidx newstartidx ...

MapReduce演算法的執行過程是怎樣的?

mapreduce演算法的執行過程是怎樣的?1 mapreduce框架使用inputformat模組做map前的預處理,比如驗證輸人的格式是否符合輸入定義 然後,將輸人檔案切分為邏輯上的多個inputsplit,inputsplit是mapreduce對檔案進行處理和運算的輸人單位,只是乙個邏輯概念...