path--diff

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相关主要内容。