# Vue中diff演算法的理解 `diff`演算法用來計算出`Virtual DOM`中改變的部分，然後針對該部分進行`DOM`操作，而不用重新渲染整個頁面，渲染整個`DOM`結構的過程中開銷是很大的，需要瀏覽器對`DOM`結構進行重繪與迴流，而`diff`演算法能夠使得操作過程中只更新修改的那部分`DOM`結構而不更新整個`DOM`，這樣能夠最小化操作`DOM`結構，能夠最大程度上減少瀏覽器重繪與迴流的規模。 ## 虛擬DOM `diff`演算法的基礎是`Virtual DOM`，`Virtual DOM`是一棵以`JavaScript`物件作為基礎的樹，每一個節點稱為`VNode`，用物件屬性來描述節點，實際上它是一層對真實`DOM`的抽象，最終可以通過渲染操作使這棵樹對映到真實環境上，簡單來說`Virtual DOM`就是一個`Js`物件，用以描述整個文件。 在瀏覽器中構建頁面時需要使用`DOM`節點描述整個文件。 ```html

1

11 ``` 如果使用`Js`物件去描述上述的節點以及文件，那麼便類似於下面的樣子，當然這不是`Vue`中用以描述節點的物件，`Vue`中用以描述一個節點的物件包括大量屬性，例如`tag`、`data`、`children`、`text`、`elm`、`ns`、`context`、`key`、`componentOptions`、`componentInstance`、`parent`、`raw`、`isStatic`、`isRootInsert`、`isComment`、`isCloned`等等，具體的屬性可以參閱`Vue`原始碼的`/dev/src/core/vdom/vnode.js`。 ```javascript { type: "tag", tagName: "div", attr: { className: "root" name: "root" }, parent: null, children: [{ type: "tag", tagName: "p", attr: {}, parent: {} /* 父節點的引用 */, children: [{ type: "text", tagName: "text", parent: {} /* 父節點的引用 */, content: "1" }] },{ type: "tag", tagName: "div", attr: {}, parent: {} /* 父節點的引用 */, children: [{ type: "text", tagName: "text", parent: {} /* 父節點的引用 */, content: "11" }] }] } ``` 當選用`diff`演算法進行部分更新的時候就需要比較舊`DOM`結構與新`DOM`結構的不同，此時就需要`VNode`來描述整個`DOM`結構，首先根據真實`DOM`生成`Virtual DOM`，當`Virtual DOM`某個節點的資料改變後會生成一個新的`Vnode`，然後通過`newVNode`和`oldVNode`進行對比，發現有不同之處便通過在`VNode`中`elm`屬性相對應的真實`DOM`節點進行`patch`修改於真實`DOM`，然後使舊的`Virtual DOM`賦值為新的`Virtual DOM`。 ## diff演算法 當資料發生改變時，`set`方法會讓呼叫`Dep.notify`通知所有訂閱者`Watcher`資料發生更新，訂閱者就會呼叫`patch`進行比較，然後將相應的部分渲染到真實`DOM`結構。 ### 時間複雜度 首先進行一次完整的`diff`需要`O(n^3)`的時間複雜度，這是一個最小編輯距離的問題，在比較字串的最小編輯距離時使用動態規劃的方案需要的時間複雜度是`O(mn)`，但是對於`DOM`來說是一個樹形結構，而樹形結構的最小編輯距離問題的時間複雜度在`30`多年的演進中從`O(m^3n^3)`演進到了`O(n^3)`，關於這個問題如果有興趣的話可以研究一下論文`https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf`。 對於原本想要提高效率而引入的`diff`演算法使用`O(n^3)`的時間複雜度顯然是不太合適的，如果有`1000`個節點元素將需要進行十億次比較，這是一個昂貴的演算法，所以必須有一些妥協來加快速度，對比較通過一些策略進行簡化，將時間複雜度縮小到`O(n)`，雖然並不是最小編輯距離，但是作為編輯距離與時間效能的折中是一個比較好的解決方案。 ### diff策略 上邊提到的`O(n)`時間複雜度是通過一定策略進行的，`React`中提到了兩個假設，在`Vue`中同樣適用： * 兩個不同型別的元素將產生不同的樹。 * 通過渲染器附帶`key`屬性，開發者可以示意哪些子元素可能是穩定的。 通俗點說就是： * 只進行統一層級的比較，如果跨層級的移動則視為建立和刪除操作。 * 如果是不同型別的元素，則認為是建立了新的元素，而不會遞迴比較他們的孩子。 * 如果是列表元素等比較相似的內容，可以通過`key`來唯一確定是移動還是建立或刪除操作。 比較後會出現幾種情況，然後進行相應的操作： * 此節點被新增或移除`->`新增或移除新的節點。 * 屬性被改變`->`舊屬性改為新屬性。 * 文字內容被改變`->`舊內容改為新內容。 * 節點`tag`或`key`是否改變`->`改變則移除後建立新元素。 ### 分析 實現`diff`演算法的部分在`Vue`原始碼中的`dev/src/core/vdom/patch.js`檔案中，不過`Vue`原始碼的實現比較複雜，文章分析比較核心的程式碼部分，精簡過後的最小化版本，`commit id`為`43b98fe`。 在呼叫`patch`方法時，會判斷是否是`VNode`，`isRealElement`其實就是根據有沒有`nodeType`來判斷是不是真實`DOM`，`VNode`是不存在這個欄位的，如果不是真實`DOM`元素，並且這兩個節點是相同的，那就就會進入這個`if`內部，呼叫`patchVnode`對`children`進行`diff`以決定該如何更新。 ```javascript // line 714 const isRealElement = isDef(oldVnode.nodeType) if (!isRealElement && sameVnode(oldVnode, vnode)) { // patch existing root node patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly) }else{ // ... } ``` 接下來看一下`sameVnode`方法，判斷如何算是相同節點。 ```javascript // line 35 function sameVnode (a, b) { return ( a.key === b.key && ( ( a.tag === b.tag && a.isComment === b.isComment && isDef(a.data) === isDef(b.data) && sameInputType(a, b) ) || ( isTrue(a.isAsyncPlaceholder) && a.asyncFactory === b.asyncFactory && isUndef(b.asyncFactory.error) ) ) ) } ``` 這裡的判斷條件其實主要是兩個： * `key`必須相同，如果都是`undefined`則也是相同的。 * `DOM`元素的標籤必須相同。 如果滿足以上條件，那麼就認為是相同的`VNode`，因此就可以進行`patchVnode`操作，如果不是就認為是完全新的一個`VNode`，就會在上邊的判斷後執行下面的`createElm`。 梳理一下邏輯，當進入`patch`之後有兩種分支可以走，如果是第一次`patch`，即元件第一次掛載的時候，或者發現元素的標籤不相同了，那麼就認為是不同的元素，直接進行`createElm` 建立新的`DOM`元素進行替換，否則，就是對已存在的`DOM`元素進行更新，那麼通過`patchVnode`進行`diff`，有條件的更新以提升效能，這樣其實就實現了策略中原則的第一條，即兩個不同型別的元素將產生不同的樹，只要發現兩個元素的型別不同，我們直接刪除舊的並建立一個新的，而不是去遞迴比較。 在認為這是兩個相同的`VNode`之後，就需要比較並更新當前元素的差異，以及遞迴比較`children`，在`patchVnode`方法中實現了這兩部分。 ```javascript // line 501 function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) { // ... if (isDef(data) && isPatchable(vnode)) { for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode) if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode) } //... } ``` `cbs.update`主要是用來更新`attributes`的，這裡的`cbs`其實是從`hooks`中來的，`hooks`在`33`行有如下定義，`const hooks = ['create', 'activate', 'update', 'remove', 'destroy']`，其是在`VNode`更新的各個階段進行相應的操作，這裡`cbs.update`包含如下幾個回撥：`updateAttributes`、`updateClass`、`updateDOMListeners`、`updateDOMProps`、`updateStyle`、`update`、`updateDirectives`，其主要都是更新當前結點的一些相關`attributes`。 之後需要更新孩子節點，這時候分兩種情況： * 如果孩子不是`textNode`，那麼需要再分三種情況處理。 * 如果當前孩子是`textNode`那麼直接更新`text`即可。 對孩子是`VNode`的三種情況： * 有新孩子無舊孩子，直接建立新的。 * 有舊孩子無新孩子，直接刪除舊的。 * 新舊孩子都有，那麼呼叫`updateChildren`。 ```javascript if (isUndef(vnode.text)) { if (isDef(oldCh) && isDef(ch)) { if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly) } else if (isDef(ch)) { if (process.env.NODE_ENV !== 'production') { checkDuplicateKeys(ch) } if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '') addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue) } else if (isDef(oldCh)) { removeVnodes(oldCh, 0, oldCh.length - 1) } else if (isDef(oldVnode.text)) { nodeOps.setTextContent(elm, '') } } else if (oldVnode.text !== vnode.text) { nodeOps.setTextContent(elm, vnode.text) } ``` 當新舊孩子都存在，那麼便呼叫`updateChildren`方法，對於每一個孩子節點，我們依然有這麼幾種可能： * 更新了節點 * 刪除了節點 * 增加了節點 * 移動了節點 `updateChildren`是`diff`的核心演算法，原始碼實現如下。 ```javascript // line 404 function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) { let oldStartIdx = 0 let newStartIdx = 0 let oldEndIdx = oldCh.length - 1 let oldStartVnode = oldCh[0] let oldEndVnode = oldCh[oldEndIdx] let newEndIdx = newCh.length - 1 let newStartVnode = newCh[0] let newEndVnode = newCh[newEndIdx] let oldKeyToIdx, idxInOld, vnodeToMove, refElm // removeOnly is a special flag used only by // to ensure removed elements stay in correct relative positions // during leaving transitions const canMove = !removeOnly if (process.env.NODE_ENV !== 'production') { checkDuplicateKeys(newCh) } while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { if (isUndef(oldStartVnode)) { oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left } else if (isUndef(oldEndVnode)) { oldEndVnode = oldCh[--oldEndIdx] } else if (sameVnode(oldStartVnode, newStartVnode)) { patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx) oldStartVnode = oldCh[++oldStartIdx] newStartVnode = newCh[++newStartIdx] } else if (sameVnode(oldEndVnode, newEndVnode)) { patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx) oldEndVnode = oldCh[--oldEndIdx] newEndVnode = newCh[--newEndIdx] } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx) canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm)) oldStartVnode = oldCh[++oldStartIdx] newEndVnode = newCh[--newEndIdx] } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx) canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm) oldEndVnode = oldCh[--oldEndIdx] newStartVnode = newCh[++newStartIdx] } else { if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx) if (isUndef(idxInOld)) { // New element createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx) } else { vnodeToMove = oldCh[idxInOld] if (sameVnode(vnodeToMove, newStartVnode)) { patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx) oldCh[idxInOld] = undefined canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm) } else { // same key but different element. treat as new element createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx) } } newStartVnode = newCh[++newStartIdx] } } if (oldStartIdx >

oldEndIdx) { refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue) } else if (newStartIdx > newEndIdx) { removeVnodes(oldCh, oldStartIdx, oldEndIdx) } } ``` 其對新舊兩個`children`陣列分別在首位各用了一個指標，總共四個指標，由於指標僅僅對陣列進行了一次遍歷，因此時間複雜度是`O(n)`，舉個簡單例子說明`diff`過程。 ``` old VNode: a(oldStartIdx) b c d e f(oldEndIdx) new VNode: b(newStartIdx) f g(newEndIdx) DOM Node: a b c d e f ``` 首先指標相互比較，即四種對比，分別為`oldStartIdx`和`newStartIdx`、`oldStartIdx`和`newEndIdx`、`oldEndIdx`和`newStartIdx`、`oldEndIdx`和`newEndIdx`，如果沒有相等的則繼續。此時分為兩種情況，有`key`和無`key`，無`key`則直接建立新的`DOM Node`插入到`a(oldStartIdx)`之前，此處認為`key`存在，有`key`的話取`newStartIdx`的`key`值，到`old VNode`去找，記錄此時的`oldKeyToIdx`，隨即調整`VNode`，將`b`移動到`a`之前，然後找到`old VNode`中`oldKeyToIdx`對應的節點值設定為`undefined`，`newStartIdx`指標向中間靠攏，即`++newStartIdx`。 ``` old VNode: a(oldStartIdx) undefined c d e f(oldEndIdx) new VNode: b f(newStartIdx) g(newEndIdx) DOM Node: b a c d e f ``` 迴圈繼續，此時對比`oldStartIdx`和`newStartIdx`、`oldStartIdx`和`newEndIdx`、`oldEndIdx`和`newStartIdx`、`oldEndIdx`和`newEndIdx`，發現`newStartIdx`與`oldEndIdx`相同，將`DOM Node`中的`f`進行移動調整到`DOM Node`中的`a(oldStartIdx)`之前，此時`newStartIdx`與`oldEndIdx`指標向中間靠攏，即`++newStartIdx`與`--oldEndIdx`。 ``` old VNode: a(oldStartIdx) undefined c d e(oldEndIdx) f new VNode: b f g(newStartIdx)(newEndIdx) DOM Node: b f a c d e ``` 迴圈繼續，此時對比`oldStartIdx`和`newStartIdx`、`oldStartIdx`和`newEndIdx`、`oldEndIdx`和`newStartIdx`、`oldEndIdx`和`newEndIdx`，並沒有相同的情況，取`newStartIdx`的`key`值，到`old VNode`去找，沒有發現相同的值，則直接建立一個節點插入到`DOM Node`中的`a(oldStartIdx)`之前，`newStartIdx`指標向中間靠攏，即`++newStartIdx`。 ``` old VNode: a(oldStartIdx) undefined c d e(oldEndIdx) f new VNode: b f g(newEndIdx) (newStartIdx) DOM Node: b f g a c d e ``` 此時迴圈結束，有兩個選擇： * 如果`oldStartldx >

oldEndldx`，說明老節點遍歷完成了，新的節點比較多，所以多出 來的這些新節點，需要創建出來並新增到真實`DOM Node`後面。 * 如果`newStartldx >newEndldx`，說明新節點遍歷完成了，老的節點比較多，所以多 出來的這些老節點，需要從真實`DOM Node`中刪除這些節點。 此時我們符合場景二，所以需要從真實`DOM Node`中刪除`[oldStartldx，oldEndldx]`區間 中的`Node`節點，根據上述內容，即需要刪除`a c d e`四個節點，至此`diff`完成。 ``` old VNode: a(oldStartIdx) undefined c d e(oldEndIdx) f new VNode: b f g(newEndIdx) (newStartIdx) DOM Node: b f g ``` `diff`完成之後便是將`new VNode`作為`old VNode`以便下次`diff`時使用，此外關於元件的`diff`，元件級別的`diff`演算法比較簡單，節點不相同就進行建立和替換，節點相同的話就會對其子節點進行更新，最後關於呼叫`createElm`來根據`VNode`建立真實的`DOM`元素，如果是一個元件，那麼 `createComponent`會返回`true`，因此不會進行接下來的操作，如果不是元件，會進行節點建立工作，並會遞迴對孩子建立節點。 ## 每日一題 ``` https://github.com/WindrunnerMax/EveryDay ``` ## 參考 ``` https://github.com/aooy/blog/issues/2 https://www.zhihu.com/question/66851503 https://juejin.im/post/6844903607913938951 https://juejin.im/post/6844903592483094535 https://reactjs.org/docs/reconciliation.html https://www.cnblogs.com/lilicat/p/13448827.html https://www.cnblogs.com/lilicat/p/13448915.html https://github.com/lihongxun945/myblog/issues/33 https://www.cnblogs.com/xujiazheng/p/12101764.html https://blog.csdn.net/dongcehao/article/details/106987886 https://blog.csdn.net/qq2276031/article/details/106407647 https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/151 https://leetcode-cn.com/problems/edit-distance/solution/bian-ji-ju-chi-by-leetcode-soluti