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對檔案進行處理和運算的輸人單位,只是乙個邏輯概念...