vdom--patch(一)我们讲了，整个Vue对象初始化并渲染到页面中的过程。
本篇文章我们主要来谈谈当页面绑定的数据修改后，是如何更新dom结构的，
即vdom的diff算法，网上讲解这部分内容的文章有很多，可以互相借鉴补充。
Vue和React在更新dom时，使用的算法相同，都是基于snabbdom。
我们前面提到过，当页面绑定的数据修改时，会触发监听该数据的watcher对象更新，
而从src/core/lifecycle.js中的mountComponent内，我们看到watcher对象更新时会调用updateComponent，
进而调用vm._update方法，vm._render()方法会依据新的数据生成新的VNode对象，
在Vue.prototype._update我们会将旧新两个VNode对象传入到__patch__方法中，
所以，最终还是回到了__patch__方法。
流程浅析
return function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) { ... let isInitialPatch = false const insertedVnodeQueue = []
if (isUndef(oldVnode)) { ... } else { // oldValue不是VNode，而是真实的dom元素 const isRealElement = isDef(oldVnode.nodeType) if (!isRealElement && sameVnode(oldVnode, vnode)) { // patch existing root node patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly) } else { if (isRealElement) { ... } // replacing existing element const oldElm = oldVnode.elm const parentElm = nodeOps.parentNode(oldElm) 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) ) if (isDef(vnode.parent)) { // component root element replaced. // update parent placeholder node element, recursively let ancestor = vnode.parent while (ancestor) { ancestor.elm = vnode.elm ancestor = ancestor.parent } if (isPatchable(vnode)) { for (let i = 0; i < cbs.create.length; ++i) { cbs.create[i](emptyNode, vnode.parent) } } } if (isDef(parentElm)) { removeVnodes(parentElm, [oldVnode], 0, 0) } else if (isDef(oldVnode.tag)) { invokeDestroyHook(oldVnode) } } } invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch) return vnode.elm }
这次我们只传入了两个参数，分别是之前的oldVnode和数据更新后生成的新的vnode，
且它们两个都是VNode的实例。所以以上代码中如果sameVnode(oldVnode, vnode)返回true，
则执行patchVnode方法，否则和第一次渲染元素时一样，走下面的流程。
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) ) } // Some browsers do not support dynamically changing type for <input> // so they need to be treated as different nodes
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 }
sameVnode方法是判断两个vnode可不可以复用为一个节点。
我们前面提到过，在原生创建一个dom对象时，会创建许多属性，频繁的添加删除dom元素，会造成性能的浪费。
所以更好的做法是尽可能的复用原有的dom。
在Vue中，判断两个元素可不可以复用的方法就是上面的sameVnode方法，
即若两个vnode的key相同，tag名相同，都是或都不是注释，都有或没有data，
如果是input则要data和attrs都有或都没有，且type必须相同。
因为我们的自定义的Vue组件，一般情况下都必须包裹在一个根元素中，
这时sameVnode比较两个vnode对象返回的是true，
所以会直接走patchVnode方法，patchVnode方法的精髓，也就是我们常说的diff。
唯一的一种情况，就是如果组件最外层包裹的元素上有v-if语句，
则可以通过v-else添加多个跟元素。其实这种情况，在真实渲染时，也只有一个根元素。
但是这种情况就有可能出现可以v-if和v-else的指令完全不同，这时就会走到下面的流程。
patchVnode
走到patchVnode方法的前提，就是我们上面所说的oldVnode和vnode是sameVnode，
该方法的功能其实就是复用dom元素。我们来一步步看看它里面的逻辑处理。
1、如果oldVnode和vnode是同一个对象，则直接返回。
if (oldVnode === vnode) {
return
}
2、如果下面的表达式为真，则直接用的oldVnode的elm和componentInstance替换vnode上的相同属性。
if (isTrue(vnode.isStatic) &&
isTrue(oldVnode.isStatic) && vnode.key === oldVnode.key && (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))) { vnode.elm = oldVnode.elm vnode.componentInstance = oldVnode.componentInstance return }
该条件判断主要分三部分：
①isTrue(vnode.isStatic) && isTrue(oldVnode.isStatic)
isStatic属性为true的条件是当前节点是静态内容根节点，所以这里vnode和oldVnode都是静态内容根节点。
②vnode.key === oldVnode.key 两个对象的key值相同
③(isTrue(vnode.isCloned) || isTrue(vnode.isOnce)) 我们在生成render函数字符串中，
会有_m或_o，他们分别是renderStatic和markOnce方法(src/core/instance/render-static.js中)。
我们的patchVnode是在数据变化后调用，render方法是不变的，只不过因为执行render函数时数据变了，
所以生成的vnode对象和之前不同。以_m为例，再次执行_m函数，会直接从vm._staticTrees中获取tree，
并通过cloneVNode方法克隆一份出来，这种情况下vnode.isCloned值为true。
export function renderStatic (
index: number, isInFor?: boolean ): VNode | Array<VNode> { let tree = this._staticTrees[index] if (tree && !isInFor) { return Array.isArray(tree) ? cloneVNodes(tree) : cloneVNode(tree) } // otherwise, render a fresh tree. tree = this._staticTrees[index] = this.$options.staticRenderFns[index].call(this._renderProxy) markStatic(tree, `__static__${index}`, false) return tree }
所以这一步主要是处理静态根节点的diff操作。
3、以上是两种特殊情况的简单处理，通常我们会有各种各样的结点，它们就会走下面处理流程：
let i
const data = vnode.data // 调用prepatch钩子函数 if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) { i(oldVnode, vnode) } // vnode对应的dom指向oldVnode的dom const elm = vnode.elm = oldVnode.elm // 分别获取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) // 调用update钩子函数 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, '') } // 如果vnode是文本结点，且text有变化，则修改elm的文本内容 } else if (oldVnode.text !== vnode.text) { nodeOps.setTextContent(elm, vnode.text) }
3.1 如果vnode.text不是文本节点
3.1.1 isDef(oldCh) && isDef(ch) 如果新旧Vnode对象都有子元素，且子元素不同时，通过updateChildren方法来更新子元素。这个方法是做子元素diff的重要方法，后面详细介绍。
3.1.2 isDef(ch) vnode有子元素，而oldVnode没有子元素。如果oldVnode是文本结点，则置空（理论上新旧Vnode必须是sameVnode不应该出现这种情况）。这种情况，只需要把ch中的元素依次添加到elm中。
function addVnodes (parentElm, refElm, vnodes, startIdx, endIdx, insertedVnodeQueue) { for (; startIdx <= endIdx; ++startIdx) { createElm(vnodes[startIdx], insertedVnodeQueue, parentElm, refElm) } }
该方法也很简单，就是依次调用createElm方法来创建子元素并添加到parentElm上。该方法我们在patch——创建dom中已经讲解。
3.1.3 isDef(oldCh) vnode没有子元素，而oldVnode有子元素。这种情况只需要删掉oldVnode的子元素。
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) } } } }
如果是标签元素，则调用销毁相关的钩子函数；如果是文本结点，则直接删除文本。
3.1.4 isDef(oldVnode.text) 否则如果oldVnode是文本结点，则直接内容置空。
3.2 oldVnode.text !== vnode.text 如果新旧VNode对象都是文本结点，则直接修改文本内容。
最后，调用postpatch钩子函数
if (isDef(data)) {
if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode) }
updateChildren
我们页面的dom是一个树状结构，上面所讲的patchVnode方法，是复用同一个dom元素，而如果新旧两个VNnode对象都有子元素，我们应该怎么去比较复用元素呢？这就是我们updateChildren方法所要做的事儿。
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, elmToMove, refElm // removeOnly使用在transition-group中，其它情况下都是false const canMove = !removeOnly // 新旧数组都没有遍历结束 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) oldStartVnode = oldCh[++oldStartIdx] newStartVnode = newCh[++newStartIdx] // 尾尾比较 } else if (sameVnode(oldEndVnode, newEndVnode)) { patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue) oldEndVnode = oldCh[--oldEndIdx] newEndVnode = newCh[--newEndIdx] // 头尾比较 } 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] // 尾头比较 } 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] } else { if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null if (isUndef(idxInOld)) { // New element createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm) newStartVnode = newCh[++newStartIdx] } else { elmToMove = oldCh[idxInOld] /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && !elmToMove) { 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(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] } } } } 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) } }
乍一看这一块代码，可能有点儿懵。具体内容其实不复杂，我们先大体看一下整个判断流程，之后通过几个例子来详细过一下。
oldStartIdx、newStartIdx、oldEndIdx、newEndIdx都是指针，具体每一个指什么，相信大家都很明了，我们整个比较的过程，会不断的移动指针。
oldStartVnode、newStartVnode、oldEndVnode、newEndVnode与上面的指针一一对应，是它们所指向的VNode结点。
while循环在oldCh或newCh遍历结束后停止，否则会不断的执行循环流程。整个流程分为以下几种情况：
1、 如果oldStartVnode未定义，则oldCh数组遍历的起始指针后移一位。
if (isUndef(oldStartVnode)) {
oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left }
注：见第七种情况，key值相同可能会置为undefined
2、 如果oldEndVnode未定义，则oldCh数组遍历的起始指针前移一位。
else if (isUndef(oldEndVnode)) {
oldEndVnode = oldCh[--oldEndIdx]
}
注：见第七种情况，key值相同可能会置为undefined
3、sameVnode(oldStartVnode, newStartVnode)，这里判断两个数组起始指针所指向的对象是否可以复用。如果返回真，则先调用patchVnode方法复用dom元素并递归比较子元素，然后oldCh和newCh的起始指针分别后移一位。
else if (sameVnode(oldStartVnode, newStartVnode)) {
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
oldStartVnode = oldCh[++oldStartIdx] newStartVnode = newCh[++newStartIdx] }
4、sameVnode(oldEndVnode, newEndVnode)，这里判断两个数组结束指针所指向的对象是否可以复用。如果返回真，则先调用patchVnode方法复用dom元素并递归比较子元素，然后oldCh和newCh的结束指针分别前移一位。
else if (sameVnode(oldEndVnode, newEndVnode)) {
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
oldEndVnode = oldCh[--oldEndIdx] newEndVnode = newCh[--newEndIdx] }
5、sameVnode(oldStartVnode, newEndVnode)，这里判断oldCh起始指针指向的对象和newCh结束指针所指向的对象是否可以复用。如果返回真，则先调用patchVnode方法复用dom元素并递归比较子元素，因为复用的元素在newCh中是结束指针所指的元素，所以把它插入到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结束指针指向的对象和newCh起始指针所指向的对象是否可以复用。如果返回真，则先调用patchVnode方法复用dom元素并递归比较子元素，因为复用的元素在newCh中是起始指针所指的元素，所以把它插入到oldStartVnode.elm的前面。最后oldCh的结束指针前移一位，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、如果上述六种情况都不满足，则走到这里。前面的比较都是头尾组合的比较，这里的情况，稍微更加复杂一些，其实主要就是根据key值来复用元素。
① 遍历oldCh数组，找出其中有key的对象，并以key为键，索引值为value，生成新的对象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，则调用createElm方法创建新元素，newCh的起始索引后移一位。
if (isUndef(idxInOld)) { // New element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm) newStartVnode = newCh[++newStartIdx] }
④ elmToMove保存的是要移动的元素，如果sameVnode(elmToMove, newStartVnode)返回真，说明可以复用，这时先调用patchVnode方法复用dom元素并递归比较子元素，重置oldCh中相对于的元素为undefined，然后把当前元素插入到oldStartVnode.elm前面，newCh的起始索引后移一位。如果sameVnode(elmToMove, newStartVnode)返回假，例如tag名不同，则调用createElm方法创建新元素，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] }
上面的内容比较枯燥，我们一起通过几个例子来看一下它的处理流程。
没有key值的情况
假设oldCh上有五个元素a、b、c、d、e，newCh有六个元素d、e、b、f、d、a，且没有key值。初始情况下，页面中dom顺序为abcde。
第一次while循环，oldStartVnode和newEndVnode都是a，所以会走到第五种情况,a元素会把插入到e元素的下一个元素前。此时页面中dom变为bcdea，oldStartVnode指向b，newEndVnode指向d。
第二次while循环，因为头尾都不相同，走到最后第七种情况，然后会创建新的元素d并插入到b前面。此时页面中dom变为dbcdea，newStartVnode指向e。
第三次while循环，oldEndVnode和newStartVnode都是e，所以会走到第六种情况，e元素会把插入到b元素之前。此时页面中dom变为debcda，oldEndVnode指向d，newStartVnode指向b。
第四次while循环，oldStartVnode和newStartVnode都指向b，所以会走到第三种情况，直接复用b元素。此时页面中dom依然为debcda，oldStartVnode指向c，newStartVnode指向f。
第五次while循环，oldEndVnode和newEndVnode都指向d，所以会走到第四种情况，直接复用d元素。此时页面中dom依然为debcda，oldEndVnode指向c，newEndVnode指向f。
第六次while循环，两个数组中都只剩下一个没有遍历的元素且不相同，所以会走到第七种情况。然后会创建新的元素f并插入到c前面。此时页面中dom变为debfcda，newStartVnode指向b。
这时newStartIdx会大于newEndIdx，所以会终止循环。这时我们发现，页面中多了c元素。所以updateChildren方法在循环之后还有删除无用的旧结点的操作。
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) }
第一种情况是oldCh中的元素全部复用。则依次把newStartIdx和newEndIdx之间的元素插入到相应的位置。
第二种情况是newCh中的元素全部复用。则依次删除oldStartIdx和oldEndIdx之间的元素，我们上面例子中的c元素在这里就会被删除。
有key值的情况
假设oldCh上有五个元素a、div[key=1]、footer[key=3]、span[key=2]、p，newCh有六个元素p[key=3]、span[key=2]、p、div[key=1]、a、span。初始情况下，页面中dom顺序为a、div[key=1]、footer[key=3]、span[key=2]、p。
第一次while循环，头尾都不可复用，所以会走到第七种情况，此时会生成oldKeyToIdx，如下：
oldKeyToIdx = {
'1': 1, '2': 3, '3': 2 }
newStartVnode元素p[key=3]根据key值比较，elmToMove会指向footer[key=3]，但因为它们标签名不一样，所以sameVNode判断会返回false。所以直接插入到a前面，页面中dom变为p[key=3]、a、div[key=1]、footer[key=3]、span[key=2]、p，newStartVnode指向span[key=2]。
第二次while循环，同样头尾都不可复用，所以会走到第七种情况，newStartVnode元素span[key=2]根据key值比较，elmToMove会指向span[k=2]，两元素可以复用，span[k=2]会被插入到a前面，页面中dom变为p[key=1]、span[key=2]、a、div[key=1]、footer[k=3]、p，newStartVnode指向div。同时oldCh变为[a, div[key=1], footer[k=3], undefined, p]。
第三次while循环，oldEndVnode和newStartVnode都是p，所以走到第六种情况，dom中最后的p元素会插入到a元素，页面中dom顺序变为p[key=1]、span[key=2]、p、a、div[key=1]、footer[k=3]，oldEndVnode前移一位指向了undefined，newStartVnode后移一位指向div[key=1]。
第四次while循环，oldEndVnode返回undefined所以会走到第二种情况。页面中dom不变，oldEndVnode指向footer[k=3]。
第五次while循环，依然头尾都不可复用，走到第七种情况，newStartVnode根据key=1找到可以复用的div[key=1]，该元素会插入到a元素之前，页面中的dom变为p[key=1]、span[key=2]、p、div[key=1]、a、footer[k=3]，同时oldCh变为[a, undefined, footer[k=3], undefined, p]，，newStartVnode后移一位指向a`。
第六次while循环，newStartVnode和oldStartVnode都指向a，可以直接复用走到第三种情况。页面中dom不变，newStartVnode后移一位指向span，oldStartVnode后移一位指向undefined。
第七次while循环，oldStartVnode返回undefined所以会走到第一种情况。页面中dom不变，oldStartVnode指向footer[k=3]。
第八次while循环，新旧没有比较的子元素都只剩一个，且不可复用，会走到第七种情况，页面中会创建span，并插入到footer[k=3]之前。此时页面中dom变为p[key=1]、span[key=2]、p、div[key=1]、a、span、footer[k=3]，newStartVnode指向超出newCh范围，指向undefined。
这时newStartIdx会大于newEndIdx，所以会终止循环。与之前例子一样，最终会删除多余的footer[k=3]。
以上基本就是vdom的diff相关主要内容。