這篇文章主要講解了“vue2.x中diff算法的原理是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue2.x中diff算法的原理是什么”吧！
創(chuàng)新互聯(lián)于2013年成立，先為高青等服務(wù)建站，高青等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為高青企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
在生成 render 函數(shù)后,就會調(diào)用掛載方法,在掛載時就會經(jīng)過 diff 計(jì)算,在初始化的時候,由于沒有舊的虛擬節(jié)點(diǎn),所以初次會將真實(shí)的 dom 節(jié)點(diǎn)與虛擬節(jié)點(diǎn)作對比,由于虛擬節(jié)點(diǎn)不是原生節(jié)點(diǎn),所以第一次會做一個替換操作。
重慶分公司
重慶分公司
// /src/core/instance/lifecycle.js
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
const vm: Component = this
const prevEl = vm.$el
const prevVnode = vm._vnode
const restoreActiveInstance = setActiveInstance(vm)
vm._vnode = vnode // 當(dāng)前render函數(shù)產(chǎn)生的虛擬節(jié)點(diǎn),保存后以便下次做對比
if (!prevVnode) {
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false) //初次渲染
} else {
vm.$el = vm.__patch__(prevVnode, vnode)
}
...
}主體會有為兩大分支: 前后虛擬節(jié)點(diǎn)一致、前后虛擬節(jié)點(diǎn)不一致
// /src/core/vdom/patch.js
export function createPatchFunction (backend) {
...
return function patch (oldVnode, vnode, hydrating, removeOnly) {
...
if (!isRealElement && sameVnode(oldVnode, vnode)) {
...// 前后虛擬節(jié)點(diǎn)一致的方法
} else {
...// 前后虛擬節(jié)點(diǎn)不一致的方法
}
}
}分為三個步驟: 1.創(chuàng)建新的節(jié)點(diǎn)、2.更新父占位符節(jié)點(diǎn)、3.刪除舊節(jié)點(diǎn)
初次進(jìn)行掛載組件時兩者不相同,之后會判斷如果是真實(shí)dom,就會將其轉(zhuǎn)為虛擬節(jié)點(diǎn)并替換掉
if (isRealElement) {
...
//需要diff 所以將第一次的真實(shí)節(jié)點(diǎn)轉(zhuǎn)換成虛擬節(jié)點(diǎn)
oldVnode = emptyNodeAt(oldVnode) //首先判斷新節(jié)點(diǎn)是否為文本,是則直接設(shè)置文本,不是則繼續(xù)判斷
新、舊節(jié)點(diǎn)都有children,深度對比(重點(diǎn))
新節(jié)點(diǎn)有children,老節(jié)點(diǎn)沒有,循環(huán)添加新節(jié)點(diǎn)
新節(jié)點(diǎn)沒有,老節(jié)點(diǎn)有children,直接刪除老節(jié)點(diǎn)
function patchVnode (oldVnode,vnode,insertedVnodeQueue,ownerArray,index,removeOnly) {
const elm = vnode.elm = oldVnode.elm
let i
const data = vnode.data
// 是組件vnode,在組件更新會調(diào)用組件的prepatch方法
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)
}
// 是否是text
if (isUndef(vnode.text)) {
// 新舊節(jié)點(diǎn)都有children
if (isDef(oldCh) && isDef(ch)) {
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
// 新有 老沒有 children 循環(huán)創(chuàng)建新節(jié)點(diǎn)
} else if (isDef(ch)) {
if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
// 新沒有 老有 children 直接刪除老節(jié)點(diǎn)
} else if (isDef(oldCh)) {
removeVnodes(oldCh, 0, oldCh.length - 1)
// 新老都沒有 children 老的是文本 就置為空
} else if (isDef(oldVnode.text)) {
nodeOps.setTextContent(elm, '')
}
// 是text 直接設(shè)置文本
} 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)
}
}新舊節(jié)點(diǎn)都有children情況的對比
// /src/core/vdom/patch.js
function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
let oldStartIdx = 0 // 老節(jié)點(diǎn)開始索引
let newStartIdx = 0 // 新節(jié)點(diǎn)開始索引
let oldEndIdx = oldCh.length - 1 // 老節(jié)點(diǎn)末尾索引
let oldStartVnode = oldCh[0] // 老節(jié)點(diǎn)開始元素
let oldEndVnode = oldCh[oldEndIdx] // 老節(jié)點(diǎn)末尾元素
let newEndIdx = newCh.length - 1 // 新節(jié)點(diǎn)末尾索引
let newStartVnode = newCh[0] // 新節(jié)點(diǎn)開始元素
let newEndVnode = newCh[newEndIdx] // 新節(jié)點(diǎn)末尾元素
let oldKeyToIdx, idxInOld, vnodeToMove, refElm
const canMove = !removeOnly
// 滿足新節(jié)點(diǎn)開始索引小于新節(jié)點(diǎn)結(jié)束索引,舊節(jié)點(diǎn)開始索引小于舊節(jié)點(diǎn)結(jié)束索引
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
if (isUndef(oldStartVnode)) { // 是否定義老節(jié)點(diǎn)開始元素
oldStartVnode = oldCh[++oldStartIdx]
} else if (isUndef(oldEndVnode)) {// 是否定義老節(jié)點(diǎn)結(jié)束元素
oldEndVnode = oldCh[--oldEndIdx]
// 頭(舊節(jié)點(diǎn)開始元素)頭(新節(jié)點(diǎn)開始元素)對比 例如四個li,末尾新增一個li,這種情況頭頭對比性能高
} else if (sameVnode(oldStartVnode, newStartVnode)) { // sameVnode判斷key和tag是否相同
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]
} else if (sameVnode(oldEndVnode, newEndVnode)) { // 尾尾對比 例如四個li,頭部新增一個li,這種情況尾尾對比性能高
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
oldEndVnode = oldCh[--oldEndIdx]
newEndVnode = newCh[--newEndIdx]
} else if (sameVnode(oldStartVnode, newEndVnode)) {// 頭尾對比 節(jié)點(diǎn)反轉(zhuǎn)優(yōu)化 reverse
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 { // 亂序?qū)Ρ?核心diff,其他方式為優(yōu)化)
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
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 {
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 {
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
}
}
newStartVnode = newCh[++newStartIdx]
}
}
// 多出來的新節(jié)點(diǎn)直接做插入 多出來的舊節(jié)點(diǎn)刪除
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)
}
}key某些情況下不能使用索引,因?yàn)楦淖兦昂蟮乃饕际且粯拥?當(dāng)在頭部添加元素時,如果用索引做key就會出現(xiàn)更新錯誤問題,vue會理解為在末尾添加一個元素(因?yàn)榍昂蟮膋ey都是0)
在各種對比情況下,只要找到兩者相同就會去遞歸對比children
在亂序?qū)Ρ戎?key的作用是極大的。無key會出現(xiàn)更新出錯問題,同時達(dá)不到復(fù)用效果
diff對比是深度優(yōu)先,同層比較
在掛載時會經(jīng)過diff算法后進(jìn)行模板更新,初次會將真實(shí)dom節(jié)點(diǎn)和生成的虛擬節(jié)點(diǎn)進(jìn)行對比,并將生成的虛擬節(jié)點(diǎn)儲存起來,以便之后更新做對比。diff算法只要分兩發(fā)分支,前后虛擬節(jié)點(diǎn)一致和前后虛擬節(jié)點(diǎn)不一致。當(dāng)前后虛擬節(jié)點(diǎn)不一致時,會創(chuàng)建新節(jié)點(diǎn)、更新父占位符、刪除舊節(jié)點(diǎn)。如果舊節(jié)點(diǎn)是真實(shí)節(jié)點(diǎn),就將其轉(zhuǎn)為虛擬節(jié)點(diǎn),拿到舊節(jié)點(diǎn)的父節(jié)點(diǎn)后替換舊節(jié)點(diǎn)。當(dāng)前后虛擬節(jié)點(diǎn)一致時,會先判斷新節(jié)點(diǎn)是否為文本,如果值則直接添加,如果不是先比較屬性,再判斷如果新節(jié)點(diǎn)有children,舊節(jié)點(diǎn)沒children,就直接添加新節(jié)點(diǎn)children,如果新節(jié)點(diǎn)沒有,舊節(jié)點(diǎn)有,就會將舊節(jié)點(diǎn)的children移除,如果新舊節(jié)點(diǎn)都有children,利用雙指針同層對比,通過頭頭對比、尾尾對比、頭尾對比、尾頭對比、亂序?qū)Ρ炔粩嗟鷮ζ溥M(jìn)行判斷更新,最大程度的利用舊節(jié)點(diǎn),之后如果有多余的新節(jié)點(diǎn)就會將其添加,多余的舊節(jié)點(diǎn)將其刪除,最后將對比后的虛擬節(jié)點(diǎn)返回儲存起來,作為下次對比的舊節(jié)點(diǎn)。
頭頭對比
如果新舊開始元素是相同vnode,遞歸調(diào)用patchVnode方法進(jìn)行深層對比,之后移動索引至下一個元素
尾尾對比
如果新舊結(jié)束元素是相同vnode,遞歸調(diào)用patchVnode方法進(jìn)行深層對比,之后移動索引至上一個元素
頭尾對比
將老節(jié)點(diǎn)開始元素和舊節(jié)點(diǎn)尾元素進(jìn)行對比,相同就遞歸調(diào)用patchVnode方法進(jìn)行深層對比,之后將舊節(jié)點(diǎn)元素移動至最后,舊節(jié)點(diǎn)頭指針移動到下一個,新節(jié)點(diǎn)的尾指針移動至上一個。例如舊:A,B,C,新:C,B,A,第一次對比將舊A移動到C后邊
尾頭對比
將老節(jié)點(diǎn)尾元素和舊節(jié)點(diǎn)開始元素進(jìn)行對比,相同就遞歸調(diào)用patchVnode方法進(jìn)行深層對比,之后將舊節(jié)點(diǎn)元素移動至最前,舊節(jié)點(diǎn)尾指針移動到上一個,新節(jié)點(diǎn)的頭指針移動至下一個。例如舊:A,B,C,新:C,B,A,D第一次對比將舊C移動到A前邊
亂序?qū)Ρ?br/>在做比較前會根據(jù)key和對應(yīng)的索引將舊節(jié)點(diǎn)生成映射表。在亂序?qū)Ρ葧r會用當(dāng)前的key去找舊節(jié)點(diǎn)的key,如果能復(fù)用,就將節(jié)點(diǎn)移動到舊的節(jié)點(diǎn)開頭處并遞歸對比children,如果不能復(fù)用就創(chuàng)建新的差入到舊的節(jié)點(diǎn)開頭處。之后將新的索引移至下一個元素
感謝各位的閱讀，以上就是“vue2.x中diff算法的原理是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vue2.x中diff算法的原理是什么這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！
