這次帶給大家如何使用vue內diff演算法,使用vue內diff演算法的注意事項有哪些,以下就是實戰案例,一起來看一下。
虛擬dom
diff演算法首先要明確一個概念就是diff的物件是虛擬dom,更新真實dom則是diff演算法的結果
Vnode基底類別
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
這個部分的程式碼主要是為了更好地知道在diff演算法中具體diff的屬性的意義,當然也可以更好地了解vnode實例
整體過程
核心函數是patch函數
#isUndef判斷(是不是undefined或null)
#// empty mount (likely as component), create new root elementcreateElm(vnode, insertedVnodeQueue) 這裡可以發現創建節點不是一個一個插入,而是放入一個隊列中統一批次
#核心函數sameVnode
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
這裡是一個外層的比較函數,直接去比較了兩個節點的key,tag(標籤),data的比較(注意這裡的data指的是VNodeData),input的話直接比較type。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
這會確認兩個節點是否有進一步比較的價值,不然直接替換
替換的過程主要是一個createElm函數另外則是銷毀oldVNode
1 2 3 4 5 6 |
|
插入過程簡化來說就是判斷node的type分別呼叫
createComponent(會判斷是否有children然後遞迴呼叫)
createComment
createTextNode
#建立後使用insert函數
之後需要用hydrate函數將虛擬dom和真是dom進行映射
1 2 3 4 5 6 7 8 9 10 11 |
|
核心函數
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
|
##const el = vnode.el = oldVnode.el 這是很重要的一步,讓vnode.el引用到現在的真實dom,當el修改時,vnode.el會同步變化。
updateChildren
這部分重點還是關注整個演算法首先四個指針,oldStart,oldEnd,newStart,newEnd,兩個數組,oldVnode,Vnode。1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
|
循環比較的幾個情況和處理(以下的--均指index的--)比較則是比較的node節點,簡略寫法不嚴謹比較用的是sameVnode函數也不是真的全等
整體循環不結束的條件oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx剩下的所有情况都走这个处理简单的说也就两种处理,处理后newStart++
newStart在old中发现一样的那么将这个移动到oldStart前
没有发现一样的那么创建一个放到oldStart之前
循环结束后并没有完成
还有一段判断才算完
1 2 3 4 5 6 7 8 9 |
|