1 `diff`演算法到底是什么？

diff演算法是一種通過同層的樹節點進行比較的高效演算法，它可以不用頻繁操作DOM，而是選用虛擬DOM節點操作，說人話就是專門用來處理虛擬DOM節點的，

2 操作流程?

為了更好理解Vue的diff演算法，請先看一位B站大佬精心制作的

通過上面視頻可以很好理解diff演算法的比較流程，清楚在回圈從左右兩邊向中間比較的更新、插入、洗掉、查詢操作，

它的操作本質就是：
分別遍歷新舊虛擬DOM節點的陣列，接著通過回圈左右雙指標比較判斷，

新的頭 newStartIndex 和老的頭 oldStartIndex 對比

新的尾 newEndIndex 和老的尾 oldEndIndex 對比

新的頭 newStartIndex 和老的尾 oldEndIndex 對比

新的尾 newEndIndex 和老的頭 oldStartIndex 對比

我看到掘金的一篇講的很不錯，可以看看，深入淺出虛擬 DOM 和 Diff 演算法，及 Vue2 與 Vue3 中的區別，我就只負責總結一下學習筆記吧，

而且它講的Vue3涉及到diff的內容也很易理解，

在頁面首次渲染的時候會呼叫一次 patch 并創建新的 vnode，不會進行更深層次的比較，

如果 oldVnode 和 vnode 的參考地址是一樣的，就表示節點沒有變化，直接回傳，
通過 oldVnode 的 isAsyncPlaceholder 判斷注釋、v-if 和異步函式的情況，選擇跳過異步組件的檢查，直接回傳，
如果 oldVnode 和 vnode 都是靜態節點，有相同的 key
- vnode 是克隆節點或者 v-once 指令控制的節點時
  - 把 oldVnode.elm 和 oldVnode.child 都復制到 vnode 上，然后回傳，
如果 vnode 不是文本節點也不是注釋的情況下：
- 如果 vnode 文本為 undefined，就刪掉 vnode.elm 文本
- 如果 vnode 和 oldVnode 都有子節點，而且子節點不一樣的話，就呼叫 updateChildren 更新子節點
- 如果只有 vnode 有子節點，就呼叫 addVnodes 創建子節點
- 如果只有 oldVnode 有子節點，就呼叫 removeVnodes 洗掉該子節點
如果 vnode 是文本節點但是和 oldVnode 文本內容不一樣，就更新文本

當每輪回圈對比時都不能滿足找到對應的key值與標簽值一致的情況時，那么要不斷拿新的開始節點的 key 去老的開始節點的子節點 children 找，

如果沒找到，就創建一個新的節點
如果找到了，再對比標簽是不是同一個節點
- 如果是同一個節點，就呼叫 patchVnode 進行后續對比，然后把這個節點插入到老的開始節點前面，并且移動新的開始下標，繼續下一輪回圈對比
- 如果不是相同節點，就創建一個新的節點
如果老的 vnode 先遍歷完，就添加新的 vnode 沒有遍歷的節點
如果新的 vnode 先遍歷完，就洗掉老的 vnode 沒有遍歷的節點

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503140.html

標籤：其他