最近複習到虛擬DOM與Diff,翻閱了眾多資料,特此總結了這篇長文,加深自己對vue的理解。這篇文章比較詳細的分析了vue的虛擬DOM,Diff演算法,其中一些關鍵的地方從別處搬運了一些圖進行說明(感謝製圖的大佬),也包含比較詳細的原始碼解讀。
真實DOM的渲染
在講虛擬DOM之前,先說一下真實DOM的渲染。
瀏覽器真實DOM渲染的過程大概分為以下幾個部分
- 構建DOM樹。通過HTML parser解析處理HTML標記,將它們構建為DOM樹(DOM tree),當解析器遇到非阻塞資源(圖片,css),會繼續解析,但是如果遇到script標籤(特別是沒有async 和 defer屬性),會阻塞渲染並停止html的解析,這就是為啥最好把script標籤放在body下面的原因。
- 構建CSSOM樹。與構建DOM類似,瀏覽器也會將樣式規則,構建成CSSOM。瀏覽器會遍歷CSS中的規則集,根據css選擇器建立具有父子,兄弟等關係的節點樹。
- 構建Render樹。這一步將DOM和CSSOM關聯,確定每個 DOM 元素應該應用什麼 CSS 規則。將所有相關樣式匹配到DOM樹中的每個可見節點,並根據CSS級聯確定每個節點的計算樣式,不可見節點(head,屬性包括 display:none的節點)不會生成到Render樹中。
- 佈局/迴流(Layout/Reflow)。瀏覽器第一次確定節點的位置以及大小叫佈局,如果後續節點位置以及大小發生變化,這一步觸釋出局調整,也就是 迴流。
- 繪製/重繪(Paint/Repaint)。將元素的每個可視部分繪製到螢幕上,包括文字、顏色、邊框、陰影和替換的元素(如按鈕和影像)。如果文字、顏色、邊框、陰影等這些元素髮生變化時,會觸發重繪(Repaint)。為了確保重繪的速度比初始繪製的速度更快,螢幕上的繪圖通常被分解成數層。將內容提升到GPU層(可以通過tranform,filter,will-change,opacity觸發)可以提高繪製以及重繪的效能。
- 合成(Compositing)。這一步將繪製過程中的分層合併,確保它們以正確的順序繪製到螢幕上顯示正確的內容。
為啥需要虛擬DOM
上面這是一次DOM渲染的過程,如果dom更新,那麼dom需要重新渲染一次,如果存在下面這種情況
<body>
<div id="container">
<div class="content" style="color: red;font-size:16px;">
This is a container
</div>
....
<div class="content" style="color: red;font-size:16px;">
This is a container
</div>
</div>
</body>
<script>
let content = document.getElementsByClassName('content');
for (let i = 0; i < 1000000; i++) {
content[i].innerHTML = `This is a content${i}`;
// 觸發迴流
content[i].style.fontSize = `20px`;
}
</script>
那麼需要真實的操作DOM100w次,觸發了迴流100w次。每次DOM的更新都會按照流程進行無差別的真實dom的更新。所以造成了很大的效能浪費。如果迴圈裡面是複雜的操作,頻繁觸發迴流與重繪,那麼就很容易就影響效能,造成卡頓。另外這裡要說明一下的是,虛擬DOM並不是意味著比DOM就更快,效能需要分場景,虛擬DOM的效能跟模板大小是正相關。虛擬DOM的比較過程是不會區分資料量大小的,在元件內部只有少量動態節點時,虛擬DOM依然是會對整個vdom進行遍歷,相比直接渲染而言是多了一層操作的。
<div class="list">
<p class="item">item</p>
<p class="item">item</p>
<p class="item">item</p>
<p class="item">{{ item }}</p>
<p class="item">item</p>
<p class="item">item</p>
</div>
比如上面這個例子,虛擬DOM。雖然只有一個動態節點,但是虛擬DOM依然需要遍歷diff整個list的class,文字,標籤等資訊,最後依然需要進行DOM渲染。如果只是dom操作,就只要操作一個具體的DOM然後進行渲染。虛擬DOM最核心的價值在於,它能通過js描述真實DOM,表達力更強,通過宣告式的語言操作,為開發者提供了更加方便快捷開發體驗,而且在沒有手動優化,大部分情景下,保證了效能下限,價效比更高。
虛擬DOM
虛擬DOM本質上是一個js物件,通過物件來表示真實的DOM結構。tag用來描述標籤,props用來描述屬性,children用來表示巢狀的層級關係。
const vnode = {
tag: 'div',
props: {
id: 'container',
},
children: [{
tag: 'div',
props: {
class: 'content',
},
text: 'This is a container'
}]
}
//對應的真實DOM結構
<div id="container">
<div class="content">
This is a container
</div>
</div>
虛擬DOM的更新不會立即操作DOM,而是會通過diff演算法,找出需要更新的節點,按需更新,並將更新的內容儲存為一個js物件,更新完成後再掛載到真實dom上,實現真實的dom更新。通過虛擬DOM,解決了操作真實DOM的三個問題。
- 無差別頻繁更新導致DOM頻繁更新,造成效能問題
- 頻繁迴流與重繪
- 開發體驗
另外由於虛擬DOM儲存的是js物件,天然的具有跨平臺的能力,而不僅僅侷限於瀏覽器。
優點
總結起來,虛擬DOM的優勢有以下幾點
- 小修改無需頻繁更新DOM,框架的diff演算法會自動比較,分析出需要更新的節點,按需更新
- 更新資料不會造成頻繁的迴流與重繪
- 表達力更強,資料更新更加方便
- 儲存的是js物件,具備跨平臺能力
不足
虛擬DOM同樣也有缺點,首次渲染大量DOM時,由於多了一層虛擬DOM的計算,會比innerHTML插入慢。
虛擬DOM實現原理
主要分三部分
- 通過js建立節點描述物件
- diff演算法比較分析新舊兩個虛擬DOM差異
- 將差異patch到真實dom上實現更新
Diff演算法
為了避免不必要的渲染,按需更新,虛擬DOM會採用Diff演算法進行虛擬DOM節點比較,比較節點差異,從而確定需要更新的節點,再進行渲染。vue採用的是深度優先,同層比較的策略。
新節點與舊節點的比較主要是圍繞三件事來達到渲染目的
- 建立新節點
- 刪除廢節點
- 更新已有節點
如何比較新舊節點是否一致呢?
function sameVnode(a, b) {
return (
a.key === b.key &&
a.asyncFactory === b.asyncFactory && (
(
a.tag === b.tag &&
a.isComment === b.isComment &&
isDef(a.data) === isDef(b.data) &&
sameInputType(a, b) //對input節點的處理
) || (
isTrue(a.isAsyncPlaceholder) &&
isUndef(b.asyncFactory.error)
)
)
)
}
//判斷兩個節點是否是同一種 input 輸入型別
function sameInputType(a, b) {
if (a.tag !== 'input') return true
let i
const typeA = isDef(i = a.data) && isDef(i = i.attrs) && i.type
const typeB = isDef(i = b.data) && isDef(i = i.attrs) && i.type
//input type 相同或者兩個type都是text
return typeA === typeB || isTextInputType(typeA) && isTextInputType(typeB)
}
可以看到,兩個節點是否相同是需要比較標籤(tag),屬性(在vue中是用data表示vnode中的屬性props), 註釋節點(isComment)的,另外碰到input的話,是會做特殊處理的。
建立新節點
當新節點有的,舊節點沒有,這就意味著這是全新的內容節點。只有元素節點,文字節點,註釋節點才能被建立插入到DOM中。
刪除舊節點
當舊節點有,而新節點沒有,那就意味著,新節點放棄了舊節點的一部分。刪除節點會連帶的刪除舊節點的子節點。
更新節點
新的節點與舊的的節點都有,那麼一切以新的為準,更新舊節點。如何判斷是否需要更新節點呢?
- 判斷新節點與舊節點是否完全一致,一樣的話就不需要更新
// 判斷vnode與oldVnode是否完全一樣
if (oldVnode === vnode) {
return;
}
- 判斷新節點與舊節點是否是靜態節點,key是否一樣,是否是克隆節點(如果不是克隆節點,那麼意味著渲染函式被重置了,這個時候需要重新渲染)或者是否設定了once屬性,滿足條件的話替換componentInstance
// 是否是靜態節點,key是否一樣,是否是克隆節點或者是否設定了once屬性
if (
isTrue(vnode.isStatic) &&
isTrue(oldVnode.isStatic) &&
vnode.key === oldVnode.key &&
(isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
) {
vnode.componentInstance = oldVnode.componentInstance;
return;
}
- 判斷新節點是否有文字(通過text屬性判斷),如果有文字那麼需要比較同層級舊節點,如果舊節點文字不同於新節點文字,那麼採用新的文字內容。如果新節點沒有文字,那麼後面需要對子節點的相關情況進行判斷
//判斷新節點是否有文字
if (isUndef(vnode.text)) {
//如果沒有文字,處理子節點的相關程式碼
....
} else if (oldVnode.text !== vnode.text) {
//新節點文字替換舊節點文字
nodeOps.setTextContent(elm, vnode.text)
}
判斷新節點與舊節點的子節點相關狀況。這裡又能分為4種情況
- 新節點與舊節點都有子節點
- 只有新節點有子節點
- 只有舊節點有子節點
- 新節點與舊節點都沒有子節點
都有子節點
對於都有子節點的情況,需要對新舊節點做比較,如果他們不相同,那麼需要進行diff操作,在vue中這裡就是updateChildren方法,後面會詳細再講,子節點的比較主要是雙端比較。
//判斷新節點是否有文字
if (isUndef(vnode.text)) {
//新舊節點都有子節點情況下,如果新舊子節點不相同,那麼進行子節點的比較,就是updateChildren方法
if (isDef(oldCh) && isDef(ch)) {
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
}
} else if (oldVnode.text !== vnode.text) {
//新節點文字替換舊節點文字
nodeOps.setTextContent(elm, vnode.text)
}
只有新節點有子節點
只有新節點有子節點,那麼就代表著這是新增的內容,那麼就是新增一個子節點到DOM,新增之前還會做一個重複key的檢測,並做出提醒,同時還要考慮,舊節點如果只是一個文字節點,沒有子節點的情況,這種情況下就需要清空舊節點的文字內容。
//只有新節點有子節點
if (isDef(ch)) {
//檢查重複key
if (process.env.NODE_ENV !== 'production') {
checkDuplicateKeys(ch)
}
//清除舊節點文字
if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
//新增新節點
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
}
//檢查重複key
function checkDuplicateKeys(children) {
const seenKeys = {}
for (let i = 0; i < children.length; i++) {
const vnode = children[i]
//子節點每一個Key
const key = vnode.key
if (isDef(key)) {
if (seenKeys[key]) {
warn(
`Duplicate keys detected: '${key}'. This may cause an update error.`,
vnode.context
)
} else {
seenKeys[key] = true
}
}
}
}
只有舊節點有子節點
只有舊節點有,那就說明,新節點拋棄了舊節點的子節點,所以需要刪除舊節點的子節點
if (isDef(oldCh)) {
//刪除舊節點
removeVnodes(oldCh, 0, oldCh.length - 1)
}
都沒有子節點
這個時候需要對舊節點文字進行判斷,看舊節點是否有文字,如果有就清空
if (isDef(oldVnode.text)) {
//清空
nodeOps.setTextContent(elm, '')
}
整體的邏輯程式碼如下
function patchVnode(
oldVnode,
vnode,
insertedVnodeQueue,
ownerArray,
index,
removeOnly
) {
// 判斷vnode與oldVnode是否完全一樣
if (oldVnode === vnode) {
return
}
if (isDef(vnode.elm) && isDef(ownerArray)) {
// 克隆重用節點
vnode = ownerArray[index] = cloneVNode(vnode)
}
const elm = vnode.elm = oldVnode.elm
if (isTrue(oldVnode.isAsyncPlaceholder)) {
if (isDef(vnode.asyncFactory.resolved)) {
hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
} else {
vnode.isAsyncPlaceholder = true
}
return
}
// 是否是靜態節點,key是否一樣,是否是克隆節點或者是否設定了once屬性
if (isTrue(vnode.isStatic) &&
isTrue(oldVnode.isStatic) &&
vnode.key === oldVnode.key &&
(isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
) {
vnode.componentInstance = oldVnode.componentInstance
return
}
let i
const data = vnode.data
if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
i(oldVnode, vnode)
}
const oldCh = oldVnode.children
const ch = vnode.children
if (isDef(data) && isPatchable(vnode)) {
//呼叫update回撥以及update鉤子
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)
}
//判斷新節點是否有文字
if (isUndef(vnode.text)) {
//新舊節點都有子節點情況下,如果新舊子節點不相同,那麼進行子節點的比較,就是updateChildren方法
if (isDef(oldCh) && isDef(ch)) {
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
} else if (isDef(ch)) {
//只有新節點有子節點
if (process.env.NODE_ENV !== 'production') {
//重複Key檢測
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)
}
if (isDef(data)) {
if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
}
}
配上流程圖會更清晰點
子節點的比較更新updateChildren
新舊節點都有子節點的情況下,這個時候是需要呼叫updateChildren方法來比較更新子節點的。所以在資料上,新舊節點子節點,就儲存為了兩個陣列。
const oldCh = [oldVnode1, oldVnode2,oldVnode3];
const newCh = [newVnode1, newVnode2,newVnode3];
子節點更新採用的是雙端比較的策略,什麼是雙端比較呢,就是新舊節點比較是通過互相比較首尾元素(存在4種比較),然後向中間靠攏比較(newStartIdx,與oldStartIdx遞增,newEndIdx與oldEndIdx遞減)的策略。
比較過程
向中間靠攏
這裡對上面出現的新前,新後,舊前,舊後做一下說明
- 新前,指的是新節點未處理的子節點陣列中的第一個元素,對應到vue原始碼中的newStartVnode
- 新後,指的是新節點未處理的子節點陣列中的最後一個元素,對應到vue原始碼中的newEndVnode
- 舊前,指的是舊節點未處理的子節點陣列中的第一個元素,對應到vue原始碼中的oldStartVnode
- 舊後,指的是舊節點未處理的子節點陣列中的最後一個元素,對應到vue原始碼中的oldEndVnode
子節點比較過程
接下來對上面的比較過程以及比較後做的操作做下說明
- 新前與舊前的比較,如果他們相同,那麼進行上面說到的patchVnode更新操作,然後新舊節點各向後一步,進行第二項的比較...直到遇到不同才會換種比較方式
if (sameVnode(oldStartVnode, newStartVnode)) {
// 更新子節點
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
// 新舊各向後一步
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]
}
- 新後與舊後的比較,如果他們相同,同樣進行pathchVnode更新,然後新舊各向前一步,進行前一項的比較...直到遇到不同,才會換比較方式
if (sameVnode(oldEndVnode, newEndVnode)) {
//更新子節點
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
// 新舊向前
oldEndVnode = oldCh[--oldEndIdx]
newEndVnode = newCh[--newEndIdx]
}
- 新後與舊前的比較,如果它們相同,就進行更新操作,然後將舊前移動到所有未處理舊節點陣列最後面,使舊前與新後位置保持一致,然後雙方一起向中間靠攏,新向前,舊向後。如果不同會繼續切換比較方式
if (sameVnode(oldStartVnode, newEndVnode)) {
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
//將舊子節點陣列第一個子節點移動插入到最後
canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
//舊向後
oldStartVnode = oldCh[++oldStartIdx]
//新向前
newEndVnode = newCh[--newEndIdx]
- 新前與舊後的比較,如果他們相同,就進行更新,然後將舊後移動到所有未處理舊節點陣列最前面,是舊後與新前位置保持一致,,然後新向後,舊向前,繼續向中間靠攏。繼續比較剩餘的節點。如果不同,就使用傳統的迴圈遍歷查詢。
if (sameVnode(oldEndVnode, newStartVnode)) {
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
//將舊後移動插入到最前
canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
//舊向前
oldEndVnode = oldCh[--oldEndIdx]
//新向後
newStartVnode = newCh[++newStartIdx]
}
- 迴圈遍歷查詢,上面四種都沒找到的情況下,會通過key去查詢匹配。
進行到這一步對於沒有設定key的節點,第一次會通過createKeyToOldIdx建立key與index的對映 {key:index}
// 對於沒有設定key的節點,第一次會通過createKeyToOldIdx建立key與index的對映 {key:index}
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
然後拿新節點的key與舊節點進行比較,找到key值匹配的節點的位置,這裡需要注意的是,如果新節點也沒key,那麼就會執行findIdxInOld方法,從頭到尾遍歷匹配舊節點
//通過新節點的key,找到新節點在舊節點中所在的位置下標,如果沒有設定key,會執行遍歷操作尋找
idxInOld = isDef(newStartVnode.key)
? oldKeyToIdx[newStartVnode.key]
: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
//findIdxInOld方法
function findIdxInOld(node, oldCh, start, end) {
for (let i = start; i < end; i++) {
const c = oldCh[i]
//找到相同節點下標
if (isDef(c) && sameVnode(node, c)) return i
}
}
如果通過上面的方法,依舊沒找到新節點與舊節點匹配的下標,那就說明這個節點是新節點,那就執行新增的操作。
//如果新節點無法在舊節點中找到自己的位置下標,說明是新元素,執行新增操作
if (isUndef(idxInOld)) {
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
}
如果找到了,那麼說明在舊節點中找到了key值一樣,或者節點和key都一樣的舊節點。如果節點一樣,那麼在patchVnode之後,需要將舊節點移動到所有未處理節點之前,對於key一樣,元素不同的節點,將其認為是新節點,執行新增操作。執行完成後,新節點向後一步。
//如果新節點無法在舊節點中找到自己的位置下標,說明是新元素,執行新增操作
if (isUndef(idxInOld)) {
// 新增元素
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
} else {
// 在舊節點中找到了key值一樣的節點
vnodeToMove = oldCh[idxInOld]
if (sameVnode(vnodeToMove, newStartVnode)) {
// 相同子節點更新操作
patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
// 更新完將舊節點賦值undefined
oldCh[idxInOld] = undefined
//將舊節點移動到所有未處理節點之前
canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
} else {
// 如果是相同的key,不同的元素,當做新節點,執行建立操作
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)
}
子節點比較總結
上面就是子節點比較更新的一個完整過程,這是完整的邏輯程式碼
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 <transition-group>
// 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)) {
// 新後與舊前
//更新子節點
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)) {
// 新前與舊後
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
//將舊後移動插入到最前
canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
//新向後,舊向前
oldEndVnode = oldCh[--oldEndIdx]
newStartVnode = newCh[++newStartIdx]
} else {
// 對於沒有設定key的節點,第一次會通過createKeyToOldIdx建立key與index的對映 {key:index}
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
//通過新節點的key,找到新節點在舊節點中所在的位置下標,如果沒有設定key,會執行遍歷操作尋找
idxInOld = isDef(newStartVnode.key) ?
oldKeyToIdx[newStartVnode.key] :
findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
//如果新節點無法在舊節點中找到自己的位置下標,說明是新元素,執行新增操作
if (isUndef(idxInOld)) {
// 新增元素
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
} else {
// 在舊節點中找到了key值一樣的節點
vnodeToMove = oldCh[idxInOld]
if (sameVnode(vnodeToMove, newStartVnode)) {
// 相同子節點更新操作
patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
// 更新完將舊節點賦值undefined
oldCh[idxInOld] = undefined
//將舊節點移動到所有未處理節點之前
canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
} else {
// 如果是相同的key,不同的元素,當做新節點,執行建立操作
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)
}
}