前言
本文旨在理一下vue中diff算法的主要邏輯和關鍵細節。
從一個簡單的demo切入： p標簽渲染一個items數組
<div id="demo"> <p v-for="item in items" :key="item">{{ item }}</p> </div> <script src="../vue-source/dist/vue.js"></script> <script> const app = new Vue({ el: "#demo", data: { items: ["a", "b", "c", "d", "e"] }, mounted() { setTimeout(() => { this.items.splice(2, 0, "f") }, 2000) } }) </script> 復制代碼先把實際順序說明：
- items數據發生變化 Dep.notify
- patch(oldVNode, vnode, ...)
- patchVnode(oldVnode, vnode, insertedVnodeQueue, ...) ps: diff從這里就開始了 insertedVnodeQueue是patch函數中定義的常量，在后期的diff里面一直維護着，典型的閉包結構。
- updateChildren() diff的核心方法
5.學習要結合實戰一起練習的，在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！
sameVnode
sameVnode函數貫穿着整個diff過程，其中首要的必要條件就是key要相等
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
眾所周知，key在patch中發揮着至關重要的作用，key可以在很多情況下能夠有效地減少不必要的重新渲染。 當不設置key時，那么渲染列表數據中的子元素key就是undefined, 顯然undefined === undefined。那么sameVNode永遠都是相同的(通常情況下)，同時造成不必要的渲染（如果是開頭的demo中不設置key的話將會多造成3次的不必要渲染）。
如果設置了key，a.key !== b.key的情況下就馬上終止了判斷，sameVnode直接返回false，不跟你多bb。
避免用數組的下標作為key
因為當數組發生變化時，下標也可能會發生變化，這可能導致一些隱蔽的bug。
patch
- 不存在 oldVnode,則進行createElm
- 存在 oldVnode 和 vnode，但是 sameVnode 返回 false, 則進行createElm
- 存在 oldVnode 和 vnode，但是 sameVnode 返回 true, 則進行patchVnode
patchVnode
可以將Vnode分為3種：
- 純文本Vnode
- 含Children的Vnode
- 不含Children的Vnode
所以情況可以分成3*3種
| oldVnode.text | oldCh | !oldCh | |
|---|---|---|---|
| vnode.text | setTextContent | setTextContent | setTextContent |
| ch | addVnodes | updateChildren | addVnodes |
| !ch | setTextContent | removeVnodes | setTextContent |
function patchVnode (oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly) { // 節點相同則直接返回，不作處理 if (oldVnode === vnode) { return } // ... const elm = vnode.elm = oldVnode.elm // ... const oldCh = oldVnode.children const ch = vnode.children // ... if (isUndef(vnode.text)) { if (isDef(oldCh) && isDef(ch)) { // 當新老Vnode.length都存在且不相等 進入updateChildren if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly) } else if (isDef(ch)) { if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '') addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue) } else if (isDef(oldCh)) { removeVnodes(elm, 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
insertedVnodeQueue 是維護的一個數組隊列，diff完成后將隊列中的數據逐個更新
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 // 首首 => 尾尾 => 首尾 => 尾首 => 遍歷old用key查找index替換位置 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] } } // 跳出while循環 也就是前后指針交錯了 // 如果是老節點的指針先交錯那就說明是新增了節點 => addVnodes // 反之 => removeVnodes 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) } 復制代碼測試
回到例子，為了能走更多的情況，改一下demo。
<body> <div id="demo"> <p v-for="item in items" :key="item">{{ item }}</p> </div> <div> ["a", "b", "c", "d", "e", "f", "g"] => ["f", "d", "a", "h", "e", "c", "b", "g"] </div> <script src="../vue/dist/vue.js"></script> <script> const app = new Vue({ el: "#demo", data: { items: ["a", "b", "c", "d", "e", "f", "g"] }, mounted() { setTimeout(() => { this.items = ["f", "d", "a", "h", "e", "c", "b", "g"] }, 2000) } }) </script> </body> 復制代碼在vue.js中的updateChildren打下斷點以便觀察。
第一次while
尾尾gg匹配成功
newStartVnode都是g, 進入
patchVnode。 我原本以為會判斷
if (oldVnode.text !== vnode.text)然后不作處理，結果竟然又進去了updateChildren。
不禁讓我
console.log("oldStartIdx", oldStartIdx, oldCh[oldStartIdx])
誤區
其中結構為
我原本以為這個
VNode.text = a; VNode.children = undefined ...
這個
<p>a</p>中的a還是一個
VNode...
好在糾正了錯誤，下面就不管那個純text的VNode了。
不會只有我現在才知道吧...
那么在debugger加個條件以便觀察 oldStartVnode.tag === 'p'
繼續
第二次while
尾首匹配成功，參考節點為a節點執行nodeOps.insertBefore
abcdefg => fabcdeg
oldStartVnode = oldCh[++oldStartIdx]; newEndVnode = newCh[--newEndIdx];
第三次while
首尾四次匹配都沒有匹配到，進入該代碼塊。
- 對剩下的
oldVnode進行createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)(值見下圖) - 如果
idxInOld不存在，則表明是new element=>createElm - 如果
idxInOld存在 =>oldCh[idxInOld] = undefined=> 參考節點為a節點執行nodeOps.insertBefore - 此時界面上也從
fabcdeg=>fdabceg
第四次while
首首aa對比成功
第五次while
首尾bb對比成功，參考節點為g節點執行nodeOps.insertBefore
fdabceg => fdacebg
第六次while
首尾cc對比成功，參考節點為b節點執行nodeOps.insertBefore
fdacebg => fdaecbg
第七次while
此時的oldStartVnode === undefined => oldStartVnode = oldCh[++oldStartIdx];
第八次while
尾尾ee匹配成功
此時oldEndIdx < oldStartIdx 跳出while，進入下面代碼塊。
oldEndIdx < oldStartIdx => 新增了節點 => 參考節點為E節點執行addVnodes()(addVnodes執行最終也是nodeOps.insertBefore)，將newCh剩余的節點（H）依次插入E(下面的refElm)節點之前。
再在debugger中按一次F8就完成了整個diff過程了，現在呈現的就是最終的fdahecbg
總結
強烈建議用Chrome瀏覽器進行調試，配合圖簡直不要太好理解
- 渲染列表的diff關鍵函數
updateChildren - 注意VNode結構 =>
<p>a<p>=>VNode{tag: 'p', children: VNode{tag: undefined, children: undefined, text: 'a'}, text: undefined} - 每一次循環:
首首=>尾尾=>首尾=>尾首=>findIndex => createElm(!idxInOld) | nodeOps.insertBefore(idxInOld) - 跳出循環 =>
addVnodes(oldStartIdx > oldEndIdx) | removeVnodes(newStartIdx > newEndIdx)
最后
注意：學習要結合實戰一起練習的，在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！
本文的文字及圖片來源於網絡加上自己的想法,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯系我們以作處理