簡單談談Vue中的diff算法
概述
diff算法,可以說是Vue的一個比較核心的內(nèi)容,之前只會用Vue來進行一些開發(fā),具體的核心的內(nèi)容其實涉獵不多,最近正好看了下這方面的內(nèi)容,簡單聊下Vue2.0的diff算法的實現(xiàn)吧,具體從幾個實現(xiàn)的函數(shù)來進行分析
虛擬Dom(virtual dom)
virtual DOM是將真實的DOM的數(shù)據(jù)抽取出來,以對象的形式模擬樹形結(jié)構(gòu)
比如以下是我們的真實DOM
<div>
<p>1234</p>
<div>
<span>1111</span>
</div>
</div>
根據(jù)真實DOM生成的虛擬DOM如下
var Vnode = {
tag: 'div',
children: [
{
tag: 'p',
text: '1234'
},
{
tag: 'div',
children:[
{
tag: 'span',
text: '1111'
}
]
}
]
}
原理
diff的原理就是當前的真實的dom生成一顆virtual DOM也就是虛擬DOM,當虛擬DOM的某個節(jié)點的數(shù)據(jù)發(fā)生改變會生成一個新的Vnode, 然后這個Vnode和舊的oldVnode對比,發(fā)現(xiàn)有不同,直接修改在真實DOM上
實現(xiàn)過程
diff算法的實現(xiàn)過程核心的就是patch,其中的patchVnode, sameVnode以及updateChildren方法值得我們?nèi)リP注一下,下面依次說明
patch方法
patch的核心邏輯是比較兩個Vnode節(jié)點,然后將差異更新到視圖上, 比對的方式是同級比較, 而不是每個層級的循環(huán)遍歷,如果比對之后得到差異,就將這些差異更新到視圖上,比對方式示例圖如下

sameVnode函數(shù)
sameVnode的作用是判斷兩個節(jié)點是否相同,判斷相同的根據(jù)是key值,tag(標簽),isCommit(注釋),是否input的type一致等等,這種方法有點瑕疵,面對v-for下的key值使用index的情況,可能也會判斷是可復用節(jié)點。
建議別使用index來作為key值。
patchVnode函數(shù)
//傳入幾個參數(shù), oldVnode代表舊節(jié)點, vnode代表新節(jié)點, readOnly代表是否是只讀節(jié)點
function patchVnode (
oldVnode,
vnode,
insertedVnodeQueue,
ownerArray,
index,
removeOnly
) {
if (oldVnode === vnode) { //當舊節(jié)點和新節(jié)點一致時,無需比較,返回
return
}
if (isDef(vnode.elm) && isDef(ownerArray)) {
// clone reused vnode
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
}
//靜態(tài)樹的重用元素
//如果vnode是克隆的,我們才會這樣做
//如果新節(jié)點沒有被克隆,則表示呈現(xiàn)函數(shù)已經(jīng)被克隆
//通過hot-reload-api重置,我們需要做一個適當?shù)闹匦落秩尽?
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)) {
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)) {
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)
}
if (isDef(data)) {
if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
}
}
具體的實現(xiàn)邏輯是:
- 新舊節(jié)點一樣的時候,不需要做改變,直接返回
- 如果新舊都是靜態(tài)節(jié)點,并且具有相同的key,當vnode是克隆節(jié)點或是v-once指令控制的節(jié)點時,只需要把oldVnode.elm和oldVnode.child都復制到vnode上
- 判斷vnode是否是注釋節(jié)點或者文本節(jié)點,從而做出以下處理
- 當vnode是文本節(jié)點或者注釋節(jié)點的時候,當vnode.text!== oldVnode.text的時候,只需要更新vnode的文本內(nèi)容;
- oldVnode和vndoe都有子節(jié)點, 如果子節(jié)點不相同,就調(diào)用updateChildren方法,具體咋實現(xiàn),下文有
- 如果只有vnode有子節(jié)點,判斷環(huán)境,如果不是生產(chǎn)環(huán)境,調(diào)用checkDuplicateKeys方法,判斷key值是否重復。之后在oldVnode上添加當前的ch
- 如果只有oldVnode上有子節(jié)點,那就調(diào)用方法刪除當前的節(jié)點
updateChildren函數(shù)
updateChildren,顧名思義,就是更新子節(jié)點的方法,從以上的patchVnode的方法,可以看出,當新舊節(jié)點都有子節(jié)點的時候,會執(zhí)行這個方法。下面我們來了解下它的實現(xiàn)邏輯,也會有一些大家可能有看到過類似的示例圖,先看下代碼
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)) { // 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)
}
}
在這里我們先定義幾個參數(shù),oldStartIdx(舊節(jié)點首索引),oldEndIdx(舊節(jié)點尾索引),oldStartVnode(舊節(jié)點首元素), oldEndVnode(舊節(jié)點尾元素);同理,newStartIdx等四項即為新節(jié)點首索引等。
看下while循環(huán)里面的操作,也是核心內(nèi)容
在判斷是同一節(jié)點之后,節(jié)點也需要繼續(xù)進行patchVnode方法
- 如果舊首元素和新首元素是相同節(jié)點,舊首索引和新首索引同時右移
- 如果舊尾元素和新尾元素是相同節(jié)點,舊尾索引和新尾索引同時左移
- 如果舊首元素點跟新尾元素是同一節(jié)點,根據(jù)方法上傳過來的readonly判斷,如果是false, 那就把舊首元素移到舊節(jié)點的尾索引的后一位,同時舊首索引右移,新尾索引左移
- 如果舊尾元素點跟新首元素是同一節(jié)點,根據(jù)方法上傳過來的readonly判斷,如果是false, 那就把舊尾元素移到舊節(jié)點的首索引前一位,同時舊尾索引左移,新首索引右移
- 如果以上都不符合
判斷是否oldCh中有和newStartVnode的具有相同的key的Vnode,如果沒有找到,說明是新的節(jié)點,創(chuàng)建一個新的節(jié)點,插入即可
如果找到了和newStartVnode具有相同的key的Vnode,命名為vnodeToMove,然后vnodeToMove和newStartVnode對比,如果相同,那就兩者再去patchVnode, 如果removeOnly是false,則將找到的和newStartVnode具有相同的key的Vnode,叫vnodeToMove.elm, 移動到oldStartVnode.elm之前
如果key值相同,但是節(jié)點不相同,則創(chuàng)建一個新的節(jié)點
在經(jīng)過了While循環(huán)之后,如果發(fā)現(xiàn)新節(jié)點數(shù)組或者舊節(jié)點數(shù)組里面還有剩余的節(jié)點,根據(jù)具體情況來進行刪除或者新增的操作
當oldStartIdx > oldEndIdx的時候,表明,oldCh先遍歷完成,那就說明還有新的節(jié)點多余,新增新的節(jié)點
當newStartIdx > newEndIdx的時候,說明新節(jié)點最先遍歷完,舊節(jié)點還有剩余,于是刪除剩余的節(jié)點
下面來看下示例圖
原始節(jié)點(以oldVnode為舊節(jié)點, Vnode為新節(jié)點, diff為最后經(jīng)過diff算法之后生成的節(jié)點數(shù)組)

循環(huán)第一次, 這里我們發(fā)現(xiàn)舊尾元素跟新首元素一致,于是,舊尾元素D移動到舊首索引的前面,也就是在A的前面,同時,舊尾索引左移,新首索引右移
循環(huán)第二次,新首元素和舊首元素一致,這時候兩元素位置不動,新舊首索引同時往右移動

循環(huán)第三次,發(fā)現(xiàn)舊元素里發(fā)現(xiàn)沒有與當前元素相同的節(jié)點,于是新增,將F放在舊首元素之前,同理,第四次循環(huán)一致,兩次循環(huán)之后生成的新的示例圖

循環(huán)第五次,如同第二次循環(huán)

循環(huán)第六次,newStartIdx再次右移

7. 經(jīng)過上次移動,newStartIdx > newEndIdx, 已經(jīng)退出while循環(huán),證明那就是newCh先遍歷完成, oldCh還有多余的節(jié)點,多余的直接刪除,于是最后的出來的節(jié)點

以上就是幾個diff算法相關的函數(shù),以及diff算法的實現(xiàn)過程
結(jié)語
diff算法是虛擬DOM的核心一部分,同層比較,通過新老節(jié)點的對比,將改動的地方更新到真實DOM上。
具體實現(xiàn)的方法是patch, patchVnode以及updateChildren
patch的核心是,如果新節(jié)點有,舊節(jié)點沒有,新增; 舊節(jié)點有,新節(jié)點沒有, 刪除;如果都存在,判斷是否是相同,相同則調(diào)用patchVnode進行下一步比較
patchVnode核心是:如果新舊節(jié)點不是注釋或者文本節(jié)點,新節(jié)點有子節(jié)點,而舊節(jié)點沒有子節(jié)點,則新增子節(jié)點;新節(jié)點沒有子節(jié)點,而舊節(jié)點有子節(jié)點,則刪除舊節(jié)點下的子節(jié)點;如果二者都有子節(jié)點,則調(diào)用updateChildren方法
updateChildren的核心則是,新舊節(jié)點對比,進行新增,刪除或者更新。
這里只是初步的解釋了Vue2.0版本的diff算法,其中的更加深層的原理以及Vue3.0的diff算法有沒有什么改變還有待學習。
到此這篇關于Vue中diff算法的文章就介紹到這了,更多相關Vue的diff算法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue如何修改data中的obj數(shù)據(jù)的屬性
這篇文章主要介紹了vue如何修改data中的obj數(shù)據(jù)的屬性,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08
vue3.0+element表格獲取每行數(shù)據(jù)代碼示例
這篇文章主要給大家介紹了關于vue3.0+element表格獲取每行數(shù)據(jù)的相關資料,在element-ui中,你可以通過為表格的行綁定單擊事件來獲取表格中的一行數(shù)據(jù),需要的朋友可以參考下2023-09-09

