/**
 * 頁面首次渲染和后續(xù)更新的入口位置，也是 patch 的入口位置 
 */
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
  if (!prevVnode) {
    // 老 VNode 不存在，表示首次渲染，即初始化頁面時走這里
    ……
  } else {
    // 響應(yīng)式數(shù)據(jù)更新時，即更新頁面時走這里
    vm.$el = vm.__patch__(prevVnode, vnode)
  }
}

/** 
* vm.__patch__ 
* 1、新節(jié)點(diǎn)不存在，老節(jié)點(diǎn)存在，調(diào)用 destroy，銷毀老節(jié)點(diǎn) 
* 2、如果 oldVnode 是真實(shí)元素，則表示首次渲染，創(chuàng)建新節(jié)點(diǎn)，并插入 body，然后移除老節(jié)點(diǎn) 
* 3、如果 oldVnode 不是真實(shí)元素，則表示更新階段，執(zhí)行 patchVnode 
*/
function patch(oldVnode, vnode, hydrating, removeOnly) {
  …… // 1、新節(jié)點(diǎn)不存在，老節(jié)點(diǎn)存在，調(diào)用 destroy，銷毀老節(jié)點(diǎn)
  if (isUndef(oldVnode)) {
    …… // 2、老節(jié)點(diǎn)不存在，執(zhí)行創(chuàng)建新節(jié)點(diǎn)
  } else {
    // 判斷 oldVnode 是否為真實(shí)元素
    const isRealElement = isDef(oldVnode.nodeType)
    if (!isRealElement && sameVnode(oldVnode, vnode)) {
      // 3、不是真實(shí)元素，但是老節(jié)點(diǎn)和新節(jié)點(diǎn)是同一個節(jié)點(diǎn)，則是更新階段，執(zhí)行 patch 更新節(jié)點(diǎn)
      patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
    } else {
      ……// 是真實(shí)元素，則表示初次渲染
    }
  }
  invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
  return vnode.elm
}

function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
  ……
  if (isUndef(vnode.text)) {// 新節(jié)點(diǎn)不為文本節(jié)點(diǎn)
    if (isDef(oldCh) && isDef(ch)) {// 新舊節(jié)點(diǎn)的子節(jié)點(diǎn)都存在，執(zhí)行diff遞歸
      if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    } else {
      ……
    }
  } else {
    ……
  }
}

/**
 * diff 過程:
 *   diff 優(yōu)化：做了四種假設(shè)，假設(shè)新老節(jié)點(diǎn)開頭結(jié)尾有相同節(jié)點(diǎn)的情況，一旦命中假設(shè)，就避免了一次循環(huán)，以提高執(zhí)行效率
 *   如果不幸沒有命中假設(shè)，則執(zhí)行遍歷，從老節(jié)點(diǎn)中找到新開始節(jié)點(diǎn)
 *   找到相同節(jié)點(diǎn)，則執(zhí)行 patchVnode，然后將老節(jié)點(diǎn)移動到正確的位置
 *   如果老節(jié)點(diǎn)先于新節(jié)點(diǎn)遍歷結(jié)束，則剩余的新節(jié)點(diǎn)執(zhí)行新增節(jié)點(diǎn)操作
 *   如果新節(jié)點(diǎn)先于老節(jié)點(diǎn)遍歷結(jié)束，則剩余的老節(jié)點(diǎn)執(zhí)行刪除操作，移除這些老節(jié)點(diǎn)
 */
function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  // 老節(jié)點(diǎn)的開始索引
  let oldStartIdx = 0
  // 新節(jié)點(diǎn)的開始索引
  let newStartIdx = 0
  // 老節(jié)點(diǎn)的結(jié)束索引
  let oldEndIdx = oldCh.length - 1
  // 第一個老節(jié)點(diǎn)
  let oldStartVnode = oldCh[0]
  // 最后一個老節(jié)點(diǎn)
  let oldEndVnode = oldCh[oldEndIdx]
  // 新節(jié)點(diǎn)的結(jié)束索引
  let newEndIdx = newCh.length - 1
  // 第一個新節(jié)點(diǎn)
  let newStartVnode = newCh[0]
  // 最后一個新節(jié)點(diǎn)
  let newEndVnode = newCh[newEndIdx]
  let oldKeyToIdx, idxInOld, vnodeToMove, refElm
  // 遍歷新老兩組節(jié)點(diǎn)，只要有一組遍歷完（開始索引超過結(jié)束索引）則跳出循環(huán)
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (isUndef(oldStartVnode)) {
      // 如果節(jié)點(diǎn)被移動，在當(dāng)前索引上可能不存在，檢測這種情況，如果節(jié)點(diǎn)不存在則調(diào)整索引
      oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
    } else if (isUndef(oldEndVnode)) {
      oldEndVnode = oldCh[--oldEndIdx]
    } else if (sameVnode(oldStartVnode, newStartVnode)) {
      // 老開始節(jié)點(diǎn)和新開始節(jié)點(diǎn)是同一個節(jié)點(diǎn)，執(zhí)行 patch
      patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
      // patch 結(jié)束后老開始和新開始的索引分別加 1
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
      // 老結(jié)束和新結(jié)束是同一個節(jié)點(diǎn)，執(zhí)行 patch
      patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
      // patch 結(jié)束后老結(jié)束和新結(jié)束的索引分別減 1
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
      // 老開始和新結(jié)束是同一個節(jié)點(diǎn)，執(zhí)行 patch
      ……
    } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
      // 老結(jié)束和新開始是同一個節(jié)點(diǎn)，執(zhí)行 patch
      ……
    } else {
      // 如果上面的四種假設(shè)都不成立，則通過遍歷找到新開始節(jié)點(diǎn)在老節(jié)點(diǎn)中的位置索引
      ……
        // 在老節(jié)點(diǎn)中找到新開始節(jié)點(diǎn)了
        if (sameVnode(vnodeToMove, newStartVnode)) {
          // 如果這兩個節(jié)點(diǎn)是同一個，則執(zhí)行 patch
          patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
          // patch 結(jié)束后將該老節(jié)點(diǎn)置為 undefined
          oldCh[idxInOld] = undefined
          canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
        } else {
          // 最后這種情況是，找到節(jié)點(diǎn)了，但是發(fā)現(xiàn)兩個節(jié)點(diǎn)不是同一個節(jié)點(diǎn)，則視為新元素，執(zhí)行創(chuàng)建
          ……
        }
      // 老節(jié)點(diǎn)向后移動一個
      newStartVnode = newCh[++newStartIdx]
    }
  }
  // 走到這里，說明老姐節(jié)點(diǎn)或者新節(jié)點(diǎn)被遍歷完了，執(zhí)行剩余節(jié)點(diǎn)的處理
  ……
}

if (sameVnode(vnodeToMove, newStartVnode)) {
          // 如果這兩個節(jié)點(diǎn)是同一個，則執(zhí)行 patch
          patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
          // patch 結(jié)束后將該老節(jié)點(diǎn)置為 undefined
          oldCh[idxInOld] = undefined
          canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
}