Vue Diff算法

Vue的Diff算法，加快了dom结构的渲染速度，提高性能，他主要的过程就在于他的整个patch的过程。这里我们主要分析一下的更新的算法的过程。
vue/src/core/vdom/patch.js中的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, vnodeToMove, refElm

    // removeOnly is a special flag used only by <transition-group>
    // to ensure removed elements stay in correct relative positions
    // during leaving transitions
    // 只做移除是一个特殊的标记符，仅被使用在<transition-group>中，为了保证被移动的元素待在正确的位置当正在做离开转换的时候。
    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)) {
      // 如果新老开始的节点一样，那么调用patchVnode函数，并且老的开始的节点往右一位，新的开始的节点也往右移一位
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
      // 如果新老结束的节点一样，那么调用patchVnode函数，并且老的结束的节点往左一位，新的结束的节点也往左移一位
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
      // 如果老的开始的节点和新的结束的节点一样，那么调用patchVnode函数，老的开始的节点移动到oldEndVnode的后面，并且老的开始的节点往右一位，新的结束的节点也往左移一位
        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函数，老的结束的节点移动到oldStartVnode的前面，并且老的结束的节点往左一位，新的开始的节点也往右移一位
        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      } else {
      // 如果以上的条件都不满足，如果老的定义的索引Key不存在，那么他就赋值（对象）
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        if (isUndef(idxInOld)) { // New element
        // 如果idxInOld没定义，那就创建一个新的元素
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
        // 否则移动的节点就是老的孩子的idxInold
          vnodeToMove = oldCh[idxInOld]
          if (sameVnode(vnodeToMove, newStartVnode)) {
          // 如果能移动的节点和新的开始的节点一样，那么调用patchVnode函数
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
            // 老的孩子的idxInold为undefined
            oldCh[idxInOld] = undefined
            // 并且把可移动的节点放在老的开始的节点的前面
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } else {
          //key相同但是如果能移动的节点和新的开始的节点不一样，创建一个新的节点
            // same key but different element. treat as new element
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }	
        // 新的开始的节点往右移一位
        newStartVnode = newCh[++newStartIdx]
      }
    }
    if (oldStartIdx > oldEndIdx) {
    // 如果老的开始的索引大于老的结束的索引，说明新的VNode节点已经遍历完了，但是老的节点还有剩余，需要从文档中删 的节点删除。
      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)
    }
  }

这个方法主要是定义了4个变量，通过不同的条件比较，快速的删除，新增，移动节点；增加也渲染的速度，以及简化了计算的过程。