// diff 的過程
  // 分析當(dāng)前兩個(gè)節(jié)點(diǎn)的類型
  // 如果是元素，更新雙方屬性、特性等，同時(shí)比較雙方子元素，這個(gè)遞歸過程，叫深度優(yōu)先
  // 如果雙方是文本，更新文本
  function patchVnode (
    oldVnode,
    vnode,
    insertedVnodeQueue,
    ownerArray,
    index,
    removeOnly
  ) {
    if (oldVnode === vnode) {
      return
    }
    // 靜態(tài)節(jié)點(diǎn)處理
    // 判斷新舊兩個(gè)虛擬節(jié)點(diǎn)是否是靜態(tài)節(jié)點(diǎn)，如果是，就不需要進(jìn)行更新操作，可以直接跳過更新比對的過程
    if (isTrue(vnode.isStatic) &&
      isTrue(oldVnode.isStatic) &&
      vnode.key === oldVnode.key &&
      (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
    ) {
      vnode.componentInstance = oldVnode.componentInstance
      return
    }
    
    // 獲取雙方孩子
    const oldCh = oldVnode.children
    const ch = vnode.children
    // 比較雙方屬性
    // Vue2在更新元素屬性的時(shí)候，是暴力全量 diff 更新的。Vue3 則做了很多優(yōu)化。
    if (isDef(data) && isPatchable(vnode)) {
      for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
      if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
    }
    // 根據(jù)雙方類型的幾種情況分別處理
    if (isUndef(vnode.text)) {// 新節(jié)點(diǎn)沒有文本
      if (isDef(oldCh) && isDef(ch)) {
        // 雙方都有子元素,就進(jìn)行重排，傳說中的 diff 就發(fā)生在這里
        if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
      } else if (isDef(ch)) {
        // 新節(jié)點(diǎn)有孩子, 老的沒有，新增創(chuàng)建
        if (process.env.NODE_ENV !== 'production') {
          checkDuplicateKeys(ch)
        }
        // 判斷老節(jié)點(diǎn)是否有文本內(nèi)容，如果有則先清空
        if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
        // 批量添加子節(jié)點(diǎn)
        addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
      } else if (isDef(oldCh)) {
        // 新節(jié)點(diǎn)沒有孩子，老的有的，則刪除老節(jié)點(diǎn)的孩子節(jié)點(diǎn)
        removeVnodes(oldCh, 0, oldCh.length - 1)
      } else if (isDef(oldVnode.text)) {
        // 新節(jié)點(diǎn)沒有文本節(jié)點(diǎn)，老的有文本節(jié)點(diǎn)，則清空老的文本節(jié)點(diǎn)
        nodeOps.setTextContent(elm, '')
      }
    } else if (oldVnode.text !== vnode.text) {
      // 新老節(jié)點(diǎn)都是文本節(jié)點(diǎn)，則判斷新老文本內(nèi)容是否相同進(jìn)行文本更新
      nodeOps.setTextContent(elm, vnode.text)
    }
    // 鉤子處理
    if (isDef(data)) {
      if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
    }
  }

// 傳說中的 diff 發(fā)生的地方
  function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    // 4個(gè)游標(biāo)和對應(yīng)節(jié)點(diǎn)
    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]
    // 后續(xù)查找需要的變量
    let oldKeyToIdx, idxInOld, vnodeToMove, refElm

    const canMove = !removeOnly

    // 循環(huán)條件是游標(biāo)不能交叉，交叉就結(jié)束
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
      // 前兩個(gè)是校正，在之前的比對中可能會(huì)刪除其中的舊節(jié)點(diǎn)，之后就會(huì)往前或者往后移動(dòng)一位
      if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
      } else if (isUndef(oldEndVnode)) {
        oldEndVnode = oldCh[--oldEndIdx]
      } else if (sameVnode(oldStartVnode, newStartVnode)) {
        // 先查找兩個(gè)開頭節(jié)點(diǎn)
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
        // 兩個(gè)結(jié)尾節(jié)點(diǎn)
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
        // 老的開始節(jié)點(diǎn)，新的結(jié)尾節(jié)點(diǎn)
        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        // 進(jìn)行節(jié)點(diǎn)移動(dòng)
        // node.insertBefore(newnode,existingnode) 1.newnode 必需。需要插入的節(jié)點(diǎn)對象  2.existingnode 可選。在其之前插入新節(jié)點(diǎn)的子節(jié)點(diǎn)。如果未規(guī)定，則 insertBefore 方法會(huì)在結(jié)尾插入 newnode。
        canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
        oldStartVnode = oldCh[++oldStartIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
        // 老的結(jié)尾節(jié)點(diǎn)，新的開始節(jié)點(diǎn)
        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        // 進(jìn)行節(jié)點(diǎn)移動(dòng)
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      } else {
        // 首尾沒找到
        // 第一次創(chuàng)建一個(gè)老的節(jié)點(diǎn)的索引 Map，方便后續(xù)不需要遍歷查找，這是一個(gè)空間換時(shí)間的方法
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        // 拿新虛擬DOM開頭的第一個(gè)節(jié)點(diǎn)，去老的虛擬DOM中進(jìn)行查找
        // 如果我們在模版渲染列表時(shí)，為節(jié)點(diǎn)設(shè)置了屬性 key，那么在上面建立的 key 與 index 索引的對應(yīng)關(guān)系時(shí)，就生成了一個(gè) key 對應(yīng)著一個(gè)節(jié)點(diǎn)下標(biāo)這樣一個(gè)對象。
        // 也就是說，如果在節(jié)點(diǎn)上設(shè)置了屬性 key，那么在老的虛擬DOM中找相同節(jié)點(diǎn)時(shí)，可以直接通過 key 拿到下標(biāo)，從而獲取節(jié)點(diǎn)，否則我們就需要每一次都要進(jìn)行遍歷查找。
        // 所以非常推薦在渲染列表時(shí)為節(jié)點(diǎn)設(shè)置 key，最好是后端返回的唯一 ID。
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        if (isUndef(idxInOld)) { // New element
          // 沒找到就進(jìn)行創(chuàng)建，并且插入到未處理的節(jié)點(diǎn)（oldStartVnode.elm）的前面
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
          vnodeToMove = oldCh[idxInOld]
          // 找到之后，也要進(jìn)行判斷是否相同節(jié)點(diǎn)
          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
            // 創(chuàng)建新的節(jié)點(diǎn)進(jìn)行替換
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }
        newStartVnode = newCh[++newStartIdx]
      }
    }
    // 循環(huán)結(jié)束
    // 后續(xù)處理工作
    if (oldStartIdx > oldEndIdx) {
      // 老的先結(jié)束，判斷新的虛擬DOM中是否還有剩下的節(jié)點(diǎn)，批量創(chuàng)建
      refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
      addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
    } else if (newStartIdx > newEndIdx) {
      // 新的先結(jié)束，判斷老的虛擬DOM中是否還剩下，批量刪除
      removeVnodes(oldCh, oldStartIdx, oldEndIdx)
    }
  }