vue diff算法全解析
更新時(shí)間：2021年04月12日 10:11:39 作者：毛小星
這篇文章主要介紹了vue diff算法的使用，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
前言
我們知道 Vue 使用的是虛擬 DOM 去減少對(duì)真實(shí) DOM 的操作次數(shù)，來提升頁面運(yùn)行的效率。今天我們來看看當(dāng)頁面的數(shù)據(jù)改變的時(shí)候，Vue 是如何來更新 DOM 的。Vue和React在更新dom時(shí)，使用的算法基本相同，都是基于 snabbdom。 當(dāng)頁面上的數(shù)據(jù)發(fā)生變化時(shí)，Vue 不會(huì)立即渲染。而是經(jīng)過 diff 算法，判斷出哪些是不需要變化的，哪些是需要變化更新的，只需要更新那些需要更新的 DOM 就可以了，這樣就減少了很多不必要的 DOM 操作，大大提升了性能。 Vue就使用了這樣的抽象節(jié)點(diǎn)VNode，它是對(duì)真實(shí)DOM的一層抽象，而不依賴某個(gè)平臺(tái)，它可以是瀏覽器平臺(tái)，也可以是weex，甚至是node平臺(tái)也可以對(duì)這樣一棵抽象DOM樹進(jìn)行創(chuàng)建刪除修改等操作，這也為前后端同構(gòu)提供了可能。
Vue 更新視圖
我們知道在 Vue 1.x 中，每一個(gè)數(shù)據(jù)都對(duì)應(yīng)一個(gè) Watcher；而在 Vue 2.x 中，一個(gè)組件對(duì)應(yīng)一個(gè) Watcher，這樣當(dāng)我們的數(shù)據(jù)改變的時(shí)候，在 set 函數(shù)中會(huì)觸發(fā) Dep 的 notify 函數(shù)去通知 Watcher 去執(zhí)行 vm._update(vm._render(), hydrating) 方法去更新視圖，下面我們來看看 _update 方法
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
// Vue.prototype.__patch__ is injected in entry points
// based on the rendering backend used.
/*基于后端渲染Vue.prototype.__patch__被用來作為一個(gè)入口*/
if (!prevVnode) {
// initial render
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
} else {
// updates
vm.$el = vm.__patch__(prevVnode, vnode)
}
restoreActiveInstance()
// update __vue__ reference
/*更新新的實(shí)例對(duì)象的__vue__*/
if (prevEl) {
prevEl.__vue__ = null
}
if (vm.$el) {
vm.$el.__vue__ = vm
}
// if parent is an HOC, update its $el as well
if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
vm.$parent.$el = vm.$el
}
// updated hook is called by the scheduler to ensure that children are
// updated in a parent's updated hook.
}
很明顯，我們能看到 _update 方法會(huì)將傳入的 Vnode 將老的 Vnode 進(jìn)行 patch 操作。 下面我們?cè)賮砜纯丛?patch 函數(shù)中都發(fā)生了什么。
patch
patch 函數(shù)將新老兩個(gè)節(jié)點(diǎn)進(jìn)行比較，然后判斷出哪些是需要修改的節(jié)點(diǎn)，只需要修改這些節(jié)點(diǎn)即可，這樣可以比較高效地更新 DOM，我們先來看一下代碼
return function patch (oldVnode, vnode, hydrating, removeOnly) {
/*vnode不存在調(diào)用銷毀鉤子刪除節(jié)點(diǎn)*/
if (isUndef(vnode)) {
if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
return
}
let isInitialPatch = false
const insertedVnodeQueue = []
/*oldVnode不存在，直接創(chuàng)建新節(jié)點(diǎn)*/
if (isUndef(oldVnode)) {
// empty mount (likely as component), create new root element
isInitialPatch = true
createElm(vnode, insertedVnodeQueue)
} else {
/*標(biāo)記舊的VNode是否有nodeType*/
const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(oldVnode, vnode)) {
// patch existing root node
/*是同一個(gè)節(jié)點(diǎn)的時(shí)候直接修改現(xiàn)有的節(jié)點(diǎn)*/
patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
} else {
if (isRealElement) {
// mounting to a real element
// check if this is server-rendered content and if we can perform
// a successful hydration.
if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
/*當(dāng)舊的VNode是服務(wù)端渲染的元素，hydrating記為true*/
oldVnode.removeAttribute(SSR_ATTR)
hydrating = true
}
if (isTrue(hydrating)) {
/*需要合并到真實(shí)Dom上*/
if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
/*調(diào)用insert鉤子*/
invokeInsertHook(vnode, insertedVnodeQueue, true)
return oldVnode
} else if (process.env.NODE_ENV !== 'production') {
warn(
'The client-side rendered virtual DOM tree is not matching ' +
'server-rendered content. This is likely caused by incorrect ' +
'HTML markup, for example nesting block-level elements inside ' +
'<p>, or missing <tbody>. Bailing hydration and performing ' +
'full client-side render.'
)
}
}
// either not server-rendered, or hydration failed.
// create an empty node and replace it
/*如果不是服務(wù)端渲染或者合并到真實(shí)Dom失敗，則創(chuàng)建一個(gè)空的VNode節(jié)點(diǎn)替換它*/
oldVnode = emptyNodeAt(oldVnode)
}
// replacing existing element
/*取代現(xiàn)有元素*/
const oldElm = oldVnode.elm
const parentElm = nodeOps.parentNode(oldElm)
// create new node
createElm(
vnode,
insertedVnodeQueue,
// extremely rare edge case: do not insert if old element is in a
// leaving transition. Only happens when combining transition +
// keep-alive + HOCs. (#4590)
oldElm._leaveCb ? null : parentElm,
nodeOps.nextSibling(oldElm)
)
// update parent placeholder node element, recursively
if (isDef(vnode.parent)) {
/*組件根節(jié)點(diǎn)被替換，遍歷更新父節(jié)點(diǎn)element*/
let ancestor = vnode.parent
const patchable = isPatchable(vnode)
while (ancestor) {
for (let i = 0; i < cbs.destroy.length; ++i) {
cbs.destroy[i](ancestor)
}
ancestor.elm = vnode.elm
if (patchable) {
/*調(diào)用create回調(diào)*/
for (let i = 0; i < cbs.create.length; ++i) {
cbs.create[i](emptyNode, ancestor)
}
// #6513
// invoke insert hooks that may have been merged by create hooks.
// e.g. for directives that uses the "inserted" hook.
const insert = ancestor.data.hook.insert
if (insert.merged) {
// start at index 1 to avoid re-invoking component mounted hook
for (let i = 1; i < insert.fns.length; i++) {
insert.fns[i]()
}
}
} else {
registerRef(ancestor)
}
ancestor = ancestor.parent
}
}
// destroy old node
if (isDef(parentElm)) {
/*移除老節(jié)點(diǎn)*/
removeVnodes([oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
/*調(diào)用destroy鉤子*/
invokeDestroyHook(oldVnode)
}
}
}
/*調(diào)用insert鉤子*/
invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
return vnode.elm
}
Vue 的 diff 算法是將同層的節(jié)點(diǎn)進(jìn)行比較，所以它的時(shí)間復(fù)雜度只有 O(n)，它的算法非常的高效。 從代碼中我們也能看出，patch 中會(huì)用 sameVnode 判斷老節(jié)點(diǎn)和新節(jié)點(diǎn)是否是同一個(gè)節(jié)點(diǎn)，如果是的話才會(huì)進(jìn)行進(jìn)一步的 patchVnode，否則就會(huì)創(chuàng)建新的 DOM，移除舊的 DOM。
sameVnode
下面我們?cè)賮砜纯?sameVnode 中是如何來判定兩個(gè)節(jié)點(diǎn)是同一個(gè)節(jié)點(diǎn)的。
/*
判斷兩個(gè)VNode節(jié)點(diǎn)是否是同一個(gè)節(jié)點(diǎn)，需要滿足以下條件
key相同
tag（當(dāng)前節(jié)點(diǎn)的標(biāo)簽名）相同
isComment（是否為注釋節(jié)點(diǎn)）相同
是否data（當(dāng)前節(jié)點(diǎn)對(duì)應(yīng)的對(duì)象，包含了具體的一些數(shù)據(jù)信息，是一個(gè)VNodeData類型，可以參考VNodeData類型中的數(shù)據(jù)信息）都有定義
當(dāng)標(biāo)簽是<input>的時(shí)候，type必須相同
*/
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)
)
)
)
}
// Some browsers do not support dynamically changing type for <input>
// so they need to be treated as different nodes
/*
判斷當(dāng)標(biāo)簽是<input>的時(shí)候，type是否相同
某些瀏覽器不支持動(dòng)態(tài)修改<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
return typeA === typeB || isTextInputType(typeA) && isTextInputType(typeB)
}
sameVnode 通過比較兩個(gè)節(jié)點(diǎn)的 key、tag、注釋節(jié)點(diǎn)、數(shù)據(jù)信息是否相等來判斷兩個(gè) Node 節(jié)點(diǎn)是否是相同節(jié)點(diǎn)，對(duì) input 標(biāo)簽做了一個(gè)單獨(dú)的判斷，為了兼容不同瀏覽器。
patchVnode
// diff算法 比較節(jié)點(diǎn)
function patchVnode (
oldVnode,
vnode,
insertedVnodeQueue,
ownerArray,
index,
removeOnly
) {
/*兩個(gè)VNode節(jié)點(diǎn)相同則直接返回*/
if (oldVnode === vnode) {
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
}
// reuse element for static trees.
// note we only do this if the vnode is cloned -
// if the new node is not cloned it means the render functions have been
// reset by the hot-reload-api and we need to do a proper re-render.
/*
如果新舊VNode都是靜態(tài)的，同時(shí)它們的key相同（代表同一節(jié)點(diǎn)），
并且新的VNode是clone或者是標(biāo)記了once（標(biāo)記v-once屬性，只渲染一次），
那么只需要替換elm以及componentInstance即可。
*/
if (isTrue(vnode.isStatic) &&
isTrue(oldVnode.isStatic) &&
vnode.key === oldVnode.key &&
(isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
) {
vnode.componentInstance = oldVnode.componentInstance
return
}
// 執(zhí)行一些組件鉤子
/*如果存在data.hook.prepatch則要先執(zhí)⾏*/
let i
const data = vnode.data
if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
/*i = data.hook.prepatch，如果存在的話，見"./create-component componentVNodeHooks"。*/
i(oldVnode, vnode)
}
// 查找新舊節(jié)點(diǎn)是否存在孩子
const oldCh = oldVnode.children
const ch = vnode.children
// 屬性更新
if (isDef(data) && isPatchable(vnode)) {
// cbs中關(guān)于屬性更新的數(shù)組拿出來[attrFn, classFn, ...]
/*調(diào)用update回調(diào)以及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)) { /*如果這個(gè)VNode節(jié)點(diǎn)沒有text文本時(shí)*/
// 雙方都有孩子
if (isDef(oldCh) && isDef(ch)) {
/*新老節(jié)點(diǎn)均有children子節(jié)點(diǎn)，則對(duì)子節(jié)點(diǎn)進(jìn)行diff操作，調(diào)用updateChildren*/
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
} else if (isDef(ch)) {
/*如果老節(jié)點(diǎn)沒有子節(jié)點(diǎn)而新節(jié)點(diǎn)存在子節(jié)點(diǎn)，先清空elm的文本內(nèi)容，然后為當(dāng)前節(jié)點(diǎn)加入子節(jié)點(diǎn)*/
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)) {
/*當(dāng)新節(jié)點(diǎn)沒有子節(jié)點(diǎn)而老節(jié)點(diǎn)有子節(jié)點(diǎn)的時(shí)候，則移除所有ele的子節(jié)點(diǎn)*/
removeVnodes(oldCh, 0, oldCh.length - 1)
} else if (isDef(oldVnode.text)) {
/*當(dāng)新老節(jié)點(diǎn)都無子節(jié)點(diǎn)的時(shí)候，只是文本的替換，因?yàn)檫@個(gè)邏輯中新節(jié)點(diǎn)text不存在，所以直接去除ele的文本*/
nodeOps.setTextContent(elm, '')
}
} else if (oldVnode.text !== vnode.text) {
/*當(dāng)新老節(jié)點(diǎn)text不一樣時(shí)，直接替換這段文本*/
nodeOps.setTextContent(elm, vnode.text)
}
/*調(diào)用postpatch鉤子*/
if (isDef(data)) {
if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
}
}
patchVnode 的過程是這樣的：
- 如果 oldVnode 和 Vnode 是同一個(gè)對(duì)象，那么久直接返回，不需要再更新
- 如果新舊VNode都是靜態(tài)的，同時(shí)它們的key相同（代表同一節(jié)點(diǎn)），并且新的VNode是clone或者是標(biāo)記了once（標(biāo)記v-once屬性，只渲染一次），那么只需要替換elm以及componentInstance即可。
- 如果vnode.text不是文本節(jié)點(diǎn)，新老節(jié)點(diǎn)均有children子節(jié)點(diǎn)，且新老節(jié)點(diǎn)的子節(jié)點(diǎn)不相同的時(shí)候，則對(duì)子節(jié)點(diǎn)進(jìn)行diff操作，調(diào)用updateChildren，這個(gè)updateChildren也是diff的核心。
- 如果老節(jié)點(diǎn)沒有子節(jié)點(diǎn)而新節(jié)點(diǎn)存在子節(jié)點(diǎn)，先清空老節(jié)點(diǎn)DOM的文本內(nèi)容，然后為當(dāng)前DOM節(jié)點(diǎn)加入子節(jié)點(diǎn)
- 當(dāng)新節(jié)點(diǎn)沒有子節(jié)點(diǎn)而老節(jié)點(diǎn)有子節(jié)點(diǎn)的時(shí)候，則移除該DOM節(jié)點(diǎn)的所有子節(jié)點(diǎn)。
- 當(dāng)新老節(jié)點(diǎn)都無子節(jié)點(diǎn)的時(shí)候，只是文本的替換。
updateChildren
我們頁面的dom是一個(gè)樹狀結(jié)構(gòu)，上面所講的patchVnode方法，是復(fù)用同一個(gè)dom元素，而如果新舊兩個(gè)VNnode對(duì)象都有子元素，我們應(yīng)該怎么去比較復(fù)用元素呢？這就是我們updateChildren方法所要做的事兒
/*
diff核心方法，比較優(yōu)化
*/
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)) {
/*前四種情況其實(shí)是指定key的時(shí)候，判定為同一個(gè)VNode，則直接patchVnode即可，分別比較oldCh以及newCh的兩頭節(jié)點(diǎn)2*2=4種情況*/
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 {
/*
生成一個(gè)key與舊VNode的key對(duì)應(yīng)的哈希表（只有第一次進(jìn)來undefined的時(shí)候會(huì)生成，也為后面檢測(cè)重復(fù)的key值做鋪墊）
比如childre是這樣的 [{xx: xx, key: 'key0'}, {xx: xx, key: 'key1'}, {xx: xx, key: 'key2'}] beginIdx = 0 endIdx = 2
結(jié)果生成{key0: 0, key1: 1, key2: 2}
*/
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
/*如果newStartVnode新的VNode節(jié)點(diǎn)存在key并且這個(gè)key在oldVnode中能找到則返回這個(gè)節(jié)點(diǎn)的idxInOld（即第幾個(gè)節(jié)點(diǎn)，下標(biāo)）*/
idxInOld = isDef(newStartVnode.key)
? oldKeyToIdx[newStartVnode.key]
: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
if (isUndef(idxInOld)) { // New element
/*newStartVnode沒有key或者是該key沒有在老節(jié)點(diǎn)中找到則創(chuàng)建一個(gè)新的節(jié)點(diǎn)*/
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
} else {
/*獲取同key的老節(jié)點(diǎn)*/
vnodeToMove = oldCh[idxInOld]
if (sameVnode(vnodeToMove, newStartVnode)) {
/*如果新VNode與得到的有相同key的節(jié)點(diǎn)是同一個(gè)VNode則進(jìn)行patchVnode*/
patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
/*因?yàn)橐呀?jīng)patchVnode進(jìn)去了，所以將這個(gè)老節(jié)點(diǎn)賦值undefined，之后如果還有新節(jié)點(diǎn)與該節(jié)點(diǎn)key相同可以檢測(cè)出來提示已有重復(fù)的key*/
oldCh[idxInOld] = undefined
/*當(dāng)有標(biāo)識(shí)位canMove實(shí)可以直接插入oldStartVnode對(duì)應(yīng)的真實(shí)Dom節(jié)點(diǎn)前面*/
canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
} else {
// same key but different element. treat as new element
/*當(dāng)新的VNode與找到的同樣key的VNode不是sameVNode的時(shí)候（比如說tag不一樣或者是有不一樣type的input標(biāo)簽），創(chuàng)建一個(gè)新的節(jié)點(diǎn)*/
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
}
}
newStartVnode = newCh[++newStartIdx]
}
}
if (oldStartIdx > oldEndIdx) {
/*全部比較完成以后，發(fā)現(xiàn)oldStartIdx > oldEndIdx的話，說明老節(jié)點(diǎn)已經(jīng)遍歷完了，新節(jié)點(diǎn)比老節(jié)點(diǎn)多，所以這時(shí)候多出來的新節(jié)點(diǎn)需要一個(gè)一個(gè)創(chuàng)建出來加入到真實(shí)Dom中*/
refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
} else if (newStartIdx > newEndIdx) {
/*如果全部比較完成以后發(fā)現(xiàn)newStartIdx > newEndIdx，則說明新節(jié)點(diǎn)已經(jīng)遍歷完了，老節(jié)點(diǎn)多余新節(jié)點(diǎn)，這個(gè)時(shí)候需要將多余的老節(jié)點(diǎn)從真實(shí)Dom中移除*/
removeVnodes(oldCh, oldStartIdx, oldEndIdx)
}
}
下面是復(fù)制其他博主的文章，覺得寫的挺好的 原文地址 ：github.com/liutao/vue2…
乍一看這一塊代碼，可能有點(diǎn)兒懵。具體內(nèi)容其實(shí)不復(fù)雜，我們先大體看一下整個(gè)判斷流程，之后通過幾個(gè)例子來詳細(xì)過一下。
oldStartIdx、newStartIdx、oldEndIdx、newEndIdx都是指針，具體每一個(gè)指什么，相信大家都很明了，我們整個(gè)比較的過程，會(huì)不斷的移動(dòng)指針。
oldStartVnode、newStartVnode、oldEndVnode、newEndVnode與上面的指針一一對(duì)應(yīng)，是它們所指向的VNode結(jié)點(diǎn)。
while循環(huán)在oldCh或newCh遍歷結(jié)束后停止，否則會(huì)不斷的執(zhí)行循環(huán)流程。整個(gè)流程分為以下幾種情況：
1、 如果oldStartVnode未定義，則oldCh數(shù)組遍歷的起始指針后移一位。
if (isUndef(oldStartVnode)) {
oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
}
注：見第七種情況，key值相同可能會(huì)置為undefined
2、 如果oldEndVnode未定義，則oldCh數(shù)組遍歷的起始指針前移一位。
else if (isUndef(oldEndVnode)) {
oldEndVnode = oldCh[--oldEndIdx]
}
注：見第七種情況，key值相同可能會(huì)置為undefined
3、sameVnode(oldStartVnode, newStartVnode)，這里判斷兩個(gè)數(shù)組起始指針?biāo)赶虻膶?duì)象是否可以復(fù)用。如果返回真，則先調(diào)用patchVnode方法復(fù)用dom元素并遞歸比較子元素，然后oldCh和newCh的起始指針分別后移一位。
else if (sameVnode(oldStartVnode, newStartVnode)) {
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]
}
4、sameVnode(oldEndVnode, newEndVnode)，這里判斷兩個(gè)數(shù)組結(jié)束指針?biāo)赶虻膶?duì)象是否可以復(fù)用。如果返回真，則先調(diào)用patchVnode方法復(fù)用dom元素并遞歸比較子元素，然后oldCh和newCh的結(jié)束指針分別前移一位。
else if (sameVnode(oldEndVnode, newEndVnode)) {
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
oldEndVnode = oldCh[--oldEndIdx]
newEndVnode = newCh[--newEndIdx]
}
5、sameVnode(oldStartVnode, newEndVnode)，這里判斷oldCh起始指針指向的對(duì)象和newCh結(jié)束指針?biāo)赶虻膶?duì)象是否可以復(fù)用。如果返回真，則先調(diào)用patchVnode方法復(fù)用dom元素并遞歸比較子元素，因?yàn)閺?fù)用的元素在newCh中是結(jié)束指針?biāo)傅脑?，所以把它插入到oldEndVnode.elm的前面。最后oldCh的起始指針后移一位，newCh的起始指針分別前移一位。
else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
oldStartVnode = oldCh[++oldStartIdx]
newEndVnode = newCh[--newEndIdx]
}
6、sameVnode(oldEndVnode, newStartVnode)，這里判斷oldCh結(jié)束指針指向的對(duì)象和newCh起始指針?biāo)赶虻膶?duì)象是否可以復(fù)用。如果返回真，則先調(diào)用patchVnode方法復(fù)用dom元素并遞歸比較子元素，因?yàn)閺?fù)用的元素在newCh中是起始指針?biāo)傅脑?，所以把它插入到oldStartVnode.elm的前面。最后oldCh的結(jié)束指針前移一位，newCh的起始指針分別后移一位。
else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
oldEndVnode = oldCh[--oldEndIdx]
newStartVnode = newCh[++newStartIdx]
}
7、如果上述六種情況都不滿足，則走到這里。前面的比較都是頭尾組合的比較，這里的情況，稍微更加復(fù)雜一些，其實(shí)主要就是根據(jù)key值來復(fù)用元素。
① 遍歷oldCh數(shù)組，找出其中有key的對(duì)象，并以key為鍵，索引值為value，生成新的對(duì)象oldKeyToIdx。
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
function createKeyToOldIdx (children, beginIdx, endIdx) {
let i, key
const map = {}
for (i = beginIdx; i <= endIdx; ++i) {
key = children[i].key
if (isDef(key)) map[key] = i
}
return map
}
② 查詢newStartVnode是否有key值，并查找oldKeyToIdx是否有相同的key。
idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null
③ 如果newStartVnode沒有key或oldKeyToIdx沒有相同的key，則調(diào)用createElm方法創(chuàng)建新元素，newCh的起始索引后移一位。
if (isUndef(idxInOld)) { // New element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
newStartVnode = newCh[++newStartIdx]
}
④ elmToMove保存的是要移動(dòng)的元素，如果sameVnode(elmToMove, newStartVnode)返回真，說明可以復(fù)用，這時(shí)先調(diào)用patchVnode方法復(fù)用dom元素并遞歸比較子元素，重置oldCh中相對(duì)于的元素為undefined，然后把當(dāng)前元素插入到oldStartVnode.elm前面，newCh的起始索引后移一位。如果sameVnode(elmToMove, newStartVnode)返回假，例如tag名不同，則調(diào)用createElm方法創(chuàng)建新元素，newCh的起始索引后移一位。
elmToMove = oldCh[idxInOld]
if (sameVnode(elmToMove, newStartVnode)) {
patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
oldCh[idxInOld] = undefined
canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
newStartVnode = newCh[++newStartIdx]
} else {
// same key but different element. treat as new element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
newStartVnode = newCh[++newStartIdx]
}
以上就是vue diff算法的使用的詳細(xì)內(nèi)容，更多關(guān)于vue diff算法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了詳解vue-loader在項(xiàng)目中是如何配置的，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
vue中的虛擬dom知識(shí)點(diǎn)總結(jié)
這篇文章主要介紹了vue中的虛擬dom知識(shí)點(diǎn)總結(jié)，文章圍繞主題內(nèi)容展開詳細(xì)介紹，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-04-04
這篇文章主要介紹了Vue中的同步和異步調(diào)用順序，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
vue左側(cè)菜單,樹形圖遞歸實(shí)現(xiàn)代碼
這篇文章主要介紹了vue左側(cè)菜單,樹形圖遞歸實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
Vue實(shí)現(xiàn)封裝一個(gè)切片上傳組件
平時(shí)業(yè)務(wù)開發(fā)中用el-upload能滿足大部分場(chǎng)景，但是對(duì)于一些大文件的上傳時(shí)會(huì)比較慢，所以自己基于el-upload封裝了一個(gè)切片上傳組件，希望對(duì)大家有所幫助2023-03-03
這篇文章介紹了Vue使用$set和$delete操作對(duì)象屬性的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
詳解基于Vue/React項(xiàng)目的移動(dòng)端適配方案
這篇文章主要介紹了詳解基于Vue/React項(xiàng)目的移動(dòng)端適配方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue子組件通過.sync修飾符修改props屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
淺析Vue3中通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡(jiǎn)化父子組件雙向綁定
這篇文章主要介紹了淺析Vue3中通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡(jiǎn)化父子組件雙向綁定,需要的朋友可以參考下2022-12-12
本篇文章主要介紹了vue腳手架vue-cli的學(xué)習(xí)使用教程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06