vue 虛擬dom的patch源碼分析

 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

 const canMove = !removeOnly

 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { // 開始索引大于結(jié)束索引，進(jìn)不了
 if (isUndef(oldStartVnode)) {
 oldStartVnode = oldCh[++oldStartIdx] // Vnode已經(jīng)被移走了。
 } else if (isUndef(oldEndVnode)) {
 oldEndVnode = oldCh[--oldEndIdx]
 } else if (sameVnode(oldStartVnode, newStartVnode)) {
 patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
 oldStartVnode = oldCh[++oldStartIdx] // 索引加1。是去對比下一個節(jié)點(diǎn)。比如之前start=a[0]，那現(xiàn)在start=a[1],改變start的值后再去對比start這個vnode
 newStartVnode = newCh[++newStartIdx]
 
 } else if (sameVnode(oldEndVnode, newEndVnode)) { 
 patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
 oldEndVnode = oldCh[--oldEndIdx]
 newEndVnode = newCh[--newEndIdx]
 } else if (sameVnode(oldStartVnode, newEndVnode)) { 
 patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
 canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))// 把節(jié)點(diǎn)b移到樹的最右邊
 oldStartVnode = oldCh[++oldStartIdx]
 newEndVnode = newCh[--newEndIdx]
 
 } else if (sameVnode(oldEndVnode, newStartVnode)) { old.end.d=new.start.d
 patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
 canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)// Vnode moved left,把d移到c的左邊。=old.start->old.end
 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)) { 
 createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm) // 創(chuàng)建新節(jié)點(diǎn)，后面執(zhí)行了nodeOps.insertBefore(parent, elm, ref)
 } else {
 vnodeToMove = oldCh[idxInOld]
 /* istanbul ignore if */
 if (process.env.NODE_ENV !== 'production' && !vnodeToMove) {
 warn(
 'It seems there are duplicate keys that is causing an update error. ' +
 'Make sure each v-for item has a unique key.'
 )
 }
 if (sameVnode(vnodeToMove, newStartVnode)) {
 patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
 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)
 }
 }
 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(parentElm, oldCh, oldStartIdx, oldEndIdx) // 刪除舊的c,removeNode(ch.elm)

 }
 }

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)
 )
 )
 )
}

/**
 * 比較新舊vnode節(jié)點(diǎn)，根據(jù)不同的狀態(tài)對dom做合理的更新操作（添加，移動，刪除）整個過程還會依次調(diào)用prepatch,update,postpatch等鉤子函數(shù)，在編譯階段生成的一些靜態(tài)子樹，在這個過程
 * @param oldVnode 中由于不會改變而直接跳過比對，動態(tài)子樹在比較過程中比較核心的部分就是當(dāng)新舊vnode同時存在children，通過updateChildren方法對子節(jié)點(diǎn)做更新，
 * @param vnode
 * @param insertedVnodeQueue
 * @param removeOnly
 */
 function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
 if (oldVnode === vnode) {
 return
 }

 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é)點(diǎn)不是克隆的，則表示呈現(xiàn)函數(shù)。
 // 由熱重加載api重新設(shè)置，我們需要進(jìn)行適當(dāng)?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 (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
 addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
 } else if (isDef(oldCh)) {
 removeVnodes(elm, 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)
 }
 }

function insertBefore (parentNode, newNode, referenceNode) {
 parentNode.insertBefore(newNode, referenceNode);
}

/**
 *
 * @param vnode根據(jù)vnode的數(shù)據(jù)結(jié)構(gòu)創(chuàng)建真實(shí)的dom節(jié)點(diǎn)，如果vnode有children則會遍歷這些子節(jié)點(diǎn)，遞歸調(diào)用createElm方法，
 * @param insertedVnodeQueue記錄子節(jié)點(diǎn)創(chuàng)建順序的隊(duì)列，每創(chuàng)建一個dom元素就會往隊(duì)列中插入當(dāng)前的vnode，當(dāng)整個vnode對象全部轉(zhuǎn)換成為真實(shí)的dom 樹時，會依次調(diào)用這個隊(duì)列中vnode hook的insert方法
 * @param parentElm
 * @param refElm
 * @param nested
 */

 let inPre = 0
 function createElm (vnode, insertedVnodeQueue, parentElm, refElm, nested) {
 vnode.isRootInsert = !nested // 過渡進(jìn)入檢查
 if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
 return
 }

 const data = vnode.data
 const children = vnode.children
 const tag = vnode.tag
 if (isDef(tag)) {
 if (process.env.NODE_ENV !== 'production') {
 if (data && data.pre) {
 inPre++
 }
 if (
 !inPre &&
 !vnode.ns &&
 !(
 config.ignoredElements.length &&
 config.ignoredElements.some(ignore => {
 return isRegExp(ignore)
 ? ignore.test(tag)
 : ignore === tag
 })
 ) &&
 config.isUnknownElement(tag)
 ) {
 warn(
 'Unknown custom element: <' + tag + '> - did you ' +
 'register the component correctly? For recursive components, ' +
 'make sure to provide the "name" option.',
 vnode.context
 )
 }
 }
 vnode.elm = vnode.ns
 ? nodeOps.createElementNS(vnode.ns, tag)
 : nodeOps.createElement(tag, vnode)
 setScope(vnode)

 /* istanbul ignore if */
 if (__WEEX__) {
 // in Weex, the default insertion order is parent-first.
 // List items can be optimized to use children-first insertion
 // with append="tree".
 const appendAsTree = isDef(data) && isTrue(data.appendAsTree)
 if (!appendAsTree) {
 if (isDef(data)) {
 invokeCreateHooks(vnode, insertedVnodeQueue)
 }
 insert(parentElm, vnode.elm, refElm)
 }
 createChildren(vnode, children, insertedVnodeQueue)
 if (appendAsTree) {
 if (isDef(data)) {
 invokeCreateHooks(vnode, insertedVnodeQueue)
 }
 insert(parentElm, vnode.elm, refElm)
 }
 } else {
 createChildren(vnode, children, insertedVnodeQueue)
 if (isDef(data)) {
 invokeCreateHooks(vnode, insertedVnodeQueue)
 }
 insert(parentElm, vnode.elm, refElm)
 }

 if (process.env.NODE_ENV !== 'production' && data && data.pre) {
 inPre--
 }
 } else if (isTrue(vnode.isComment)) {
 vnode.elm = nodeOps.createComment(vnode.text)
 insert(parentElm, vnode.elm, refElm)
 } else {
 vnode.elm = nodeOps.createTextNode(vnode.text)
 insert(parentElm, vnode.elm, refElm)
 }
 }
function insert (parent, elm, ref) {
 if (isDef(parent)) {
 if (isDef(ref)) {
 if (ref.parentNode === parent) {
 nodeOps.insertBefore(parent, elm, ref)
 }
 } else {
 nodeOps.appendChild(parent, elm)
 }
 }
 }

function removeVnodes (parentElm, vnodes, startIdx, endIdx) {
 for (; startIdx <= endIdx; ++startIdx) {
 const ch = vnodes[startIdx]
 if (isDef(ch)) {
 if (isDef(ch.tag)) {
 removeAndInvokeRemoveHook(ch)
 invokeDestroyHook(ch)
 } else { // Text node
 removeNode(ch.elm)
 }
 }
 }
 }