diff算法

diff算法我们知道都是同层比较，那么同层是怎么判断的？

我们先看一下vue源码中的 关键部分

  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)) {
        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 {
        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
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
          vnodeToMove = oldCh[idxInOld]
          if (sameVnode(vnodeToMove, newStartVnode)) {
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
            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, false, newCh, newStartIdx)
          }
        }
        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(oldCh, oldStartIdx, oldEndIdx)
    }
  }

同层子节点的比较策略

1. oldStartNode 为空 oldStartIndex指针下移，并设置oldStartNode 为下一项

2. oldEndNode 为空，oldEndIndex指针上移，并设置oldEndValue 为前一项

3. 判断oldStartNode 与newStartNode 是否相同，相同时 oldStartIndex 与 newStartIndex 下移，并分别赋值oldStartNode,newStartNode

4. 判断oldEndNode 与 newEndNode 是否相同，形同时 oldEndIndex 与 newStartIndex 上移，并分支赋值 oldEndNode ，newEndNode

5. 判断oldStartNode 与 newEndNode 是否相同，相同时，先将oldStartNode对应的dom移动到oldEndIndex指针之后，
   然后oldStartINdex下移，newEndNode 上移，

6. 判断oldEndNode 与 newStartNode 是否相同，相同时，先将newStartNode对应的dom移动到oldStartIndex指针之前，
   然后oldStartINdex下移，newEndNode 上移，

7. 前面条件都不满足时，在旧节点中查找新节点中的当前项，如果在旧节点中不存在，说明是新增节点，如果存在说明是位置变动

8. 循环结束

   • 如果newStartIndex<newEndIndex 说明有需要新增的元素， 遍历newStartInd 到 newEndIndex , 在newEndIndex处追加元素
   • 如果oldStartIndex< oldEndIndex,说明老的有需要删除的元素，需要删除oldStartIndex 到 oldEndIndex 之间的元素

画图理解下
1.开始状态

2. 开始比较 第一个，满足条件3，新旧指针同时下移
   
   3.指针走到B, oldStartNode与newStartNode还是相同，重复上一步
   

4.此时旧指针走到c，新指针走到e，根据diff策略，oldStartNode与newStartNode相同，把e的dom移动到c之前，然后oldEndIndex 上移，newStartIndex 下移


5. 此时满足 oldEndNode 与 newEndNode 相等，end指针都上移

6.new中的newStartIndex大于newEndIndex，此时while循环结束，跳出循环，new先结束说明，old中有需要删除的元素，删除从oldStartIndex到oldEndIndex的元素即完成diff

其他更复杂的情况可以自己画图理解