淺析Vue源碼（九）——VirtualDOM與path

時間 2019-11-16

標籤淺析 vue 源碼 virtualdom path 简体版

原文原文鏈接

今天來說講VirtualDom與path之間到底存在什麼關係？vue

VNode (VirtualDom)

在未出現雙向綁定以前，咱們須要在各個觸發事件方法中直接操做DOM節點來達到修改相應視圖的目的。可是當應用一大就會變得難以維護，reflow(迴流)很影響性能的。node

所以就有人提出來，那咱們是否是能夠把真實DOM樹抽象成一棵以JavaScript對象構成的抽象樹，在修改抽象樹數據後將抽象樹轉化成真實DOM重繪到頁面上呢？因而虛擬DOM出現了，它是真實DOM的一層抽象，用屬性描述真實DOM的各個特性。當它發生變化的時候，就會去修改視圖。git

能夠想象，若是用最簡單粗暴的方法將整個DOM結構用innerHTML修改到頁面上，那麼這樣進行重繪整個視圖層是至關消耗性能的，那是否是能夠考慮每次只更新它修改的部分呢？因此Vue.js將DOM抽象成一個以JavaScript對象爲節點的虛擬DOM樹，以VNode節點模擬真實DOM，能夠對這顆抽象樹進行建立節點、刪除節點以及修改節點等操做，在這過程當中都不須要操做真實DOM，只須要操做JavaScript對象後只對差別修改，相對於整塊的innerHTML的粗暴式修改，大大提高了性能。修改之後通過diff算法得出一些須要修改的最小單位，再將這些小單位的視圖進行更新。這樣作減小了不少不須要的DOM操做，大大提升了性能。github

Vue就使用了這樣的抽象節點VNode，它是對真實DOM的一層抽象，而不依賴某個平臺，它能夠是瀏覽器平臺，也能夠是weex，甚至是node平臺也能夠對這樣一棵抽象DOM樹進行建立刪除修改等操做，這也爲先後端同構提供了可能。web

具體VNode的細節能夠看淺析Vue源碼（七）——render到VNode的生成。算法

如何修改視圖呢？

前文已經介紹了Vue是經過數據綁定來修改視圖的，當某個數據被修改的時候，set方法會讓閉包中的Dep調用notify通知全部訂閱者Watcher，Watcher經過get方法執行vm._update(vm._render(), hydrating)。後端

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    /*若是已經該組件已經掛載過了則表明進入這個步驟是個更新的過程，觸發beforeUpdate鉤子*/
    if (vm._isMounted) {
      callHook(vm, 'beforeUpdate')
    }
    const prevEl = vm.$el
    const prevVnode = vm._vnode
    const prevActiveInstance = activeInstance
    activeInstance = vm
    vm._vnode = vnode
    // Vue.prototype.__patch__ is injected in entry points
    // based on the rendering backend used.
    /*基於後端渲染Vue.prototype.__patch__被用來做爲一個入口*/
    if (!prevVnode) {
      // initial render
      vm.$el = vm.__patch__(
        vm.$el, vnode, hydrating, false /* removeOnly */,
        vm.$options._parentElm,
        vm.$options._refElm
      )
    } else {
      // updates
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    activeInstance = prevActiveInstance
    // update __vue__ reference
    /*更新新的實例對象的__vue__*/
    if (prevEl) {
      prevEl.__vue__ = null
    }
    if (vm.$el) {
      vm.$el.__vue__ = vm
    }
    // if parent is an HOC, update its $el as well
    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
      vm.$parent.$el = vm.$el
    }
    // updated hook is called by the scheduler to ensure that children are
    // updated in a parent's updated hook. } 複製代碼

update方法的第一個參數是一個VNode對象，在內部會將該VNode對象與以前舊的VNode對象進行__patch_。api

那究竟什麼是path？數組

path

patch將新老VNode節點進行比對，而後將根據二者的比較結果進行最小單位地修改視圖，而不是將整個視圖根據新的VNode重繪。patch的核心在於diff算法，這套算法能夠高效地比較virtual DOM的變動，得出變化以修改視圖。瀏覽器

那麼patch如何工做的呢？

首先說一下patch的核心diff算法，diff算法是經過同層的樹節點進行比較而非對樹進行逐層搜索遍歷的方式，因此時間複雜度只有O(n)，是一種至關高效的算法。

這兩張圖表明舊的VNode與新VNode進行patch的過程，他們只是在同層級的VNode之間進行比較獲得變化（第二張圖中相同顏色的方塊表明互相進行比較的VNode節點），而後修改變化的視圖，因此十分高效。

經過前面的介紹，咱們知道須要將VNode轉換成真實的DOMe節點，須要經過patch函數來實現：

vm.$el = vm.__patch__(prevVnode, vnode)
複製代碼

而__patch__是在platforms/web/runtime/index.js中定義的:

// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop
複製代碼

這裏主要是爲了判斷當前環境是不是在瀏覽器環境中，也就是是否存在Window對象。這裏也是爲了作跨平臺的處理，若是是在server render環境，那麼patch就是一個空操做。那接下來咱們來看看path源碼(src/core/vdom/patch.js)。

/*createPatchFunction的返回值，一個patch函數*/
return function patch (oldVnode, vnode, hydrating, removeOnly) {
/*vnode不存在則直接調用銷燬鉤子*/
    if (isUndef(vnode)) {
      if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
      return
    }

    let isInitialPatch = false
    const insertedVnodeQueue = []

    if (isUndef(oldVnode)) {
      // empty mount (likely as component), create new root element
      /*oldVnode未定義的時候，其實也就是root節點，建立一個新的節點*/
      isInitialPatch = true
      createElm(vnode, insertedVnodeQueue)
    } else {
    /*標記舊的VNode是否有nodeType*/
      const isRealElement = isDef(oldVnode.nodeType)
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        // patch existing root node
        /*是同一個節點的時候直接修改現有的節點*/
        patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
      } else {
        if (isRealElement) {
          // mounting to a real element
          // check if this is server-rendered content and if we can perform
          // a successful hydration.
          if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
          /*當舊的VNode是服務端渲染的元素，hydrating記爲true*/
            oldVnode.removeAttribute(SSR_ATTR)
            hydrating = true
          }
          if (isTrue(hydrating)) {
          /*須要合併到真實DOM上*/
            if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
             /*調用insert鉤子*/
              invokeInsertHook(vnode, insertedVnodeQueue, true)
              return oldVnode
            } else if (process.env.NODE_ENV !== 'production') {
              warn(
                'The client-side rendered virtual DOM tree is not matching ' +
                'server-rendered content. This is likely caused by incorrect ' +
                'HTML markup, for example nesting block-level elements inside ' +
                '<p>, or missing <tbody>. Bailing hydration and performing ' +
                'full client-side render.'
              )
            }
          }
          // either not server-rendered, or hydration failed.
          // create an empty node and replace it
           /*若是不是服務端渲染或者合併到真實DOM失敗，則建立一個空的VNode節點替換它*/
          oldVnode = emptyNodeAt(oldVnode)
        }

        // replacing existing element
        /*取代現有元素*/
        const oldElm = oldVnode.elm
        const parentElm = nodeOps.parentNode(oldElm)

        // create new node
        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)
        )

        // update parent placeholder node element, recursively
        if (isDef(vnode.parent)) {
        /*組件根節點被替換，遍歷更新父節點element*/
          let ancestor = vnode.parent
          const patchable = isPatchable(vnode)
          while (ancestor) {
            for (let i = 0; i < cbs.destroy.length; ++i) {
              cbs.destroy[i](ancestor)
            }
            ancestor.elm = vnode.elm
            if (patchable) {
            /*調用create回調*/
              for (let i = 0; i < cbs.create.length; ++i) {
                cbs.create[i](emptyNode, ancestor)
              }
              // #6513
              // invoke insert hooks that may have been merged by create hooks.
              // e.g. for directives that uses the "inserted" hook.
              const insert = ancestor.data.hook.insert
              if (insert.merged) {
                // start at index 1 to avoid re-invoking component mounted hook
                for (let i = 1; i < insert.fns.length; i++) {
                  insert.fns[i]()
                }
              }
            } else {
              registerRef(ancestor)
            }
            ancestor = ancestor.parent
          }
        }

        // destroy old node
        if (isDef(parentElm)) {
        /*移除老節點*/
          removeVnodes(parentElm, [oldVnode], 0, 0)
        } else if (isDef(oldVnode.tag)) {
        /*調用destroy鉤子*/
          invokeDestroyHook(oldVnode)
        }
      }
    }
    /*調用insert鉤子*/
    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    return vnode.elm
  }
複製代碼

這裏經過createPatchFunction函數，來建立返回一個patch函數。path接收6個參數：

1.oldVnode: 舊的虛擬節點或舊的真實dom節點

2.vnode: 新的虛擬節點

3.hydrating: 是否要跟真實dom合併

4.removeOnly: 特殊flag，用於組件

5.parentElm:父節點

6.refElm: 新節點將插入到refElm以前

具體解析看代碼註釋~拋開調用生命週期鉤子和銷燬就節點不談，咱們發現代碼中的關鍵在於sameVnode、 createElm 和 patchVnode 方法。

sameVnode

咱們來看一下sameVnode的實現。

/*
  判斷兩個VNode節點是不是同一個節點，須要知足如下條件
  key相同
  tag（當前節點的標籤名）相同
  isComment（是否爲註釋節點）相同
  是否data（當前節點對應的對象，包含了具體的一些數據信息，是一個VNodeData類型，能夠參考VNodeData類型中的數據信息）都有定義
  當標籤是<input>的時候，type必須相同
*/
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)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}

// Some browsers do not support dynamically changing type for <input>
// so they need to be treated as different nodes
/*
  判斷當標籤是<input>的時候，type是否相同
  某些瀏覽器不支持動態修改<input>類型，因此他們被視爲不一樣類型
*/
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 || isTextInputType(typeA) && isTextInputType(typeB)
}
複製代碼

createElm

function createElm (vnode,insertedVnodeQueue,parentElm, refElm,nested,ownerArray,index) {
    if (isDef(vnode.elm) && isDef(ownerArray)) {
      // This vnode was used in a previous render!
      // now it's used as a new node, overwriting its elm would cause // potential patch errors down the road when it's used as an insertion
      // reference node. Instead, we clone the node on-demand before creating
      // associated DOM element for it.
      vnode = ownerArray[index] = cloneVNode(vnode)
    }
    // 用於建立組件，在調用了組件初始化鉤子以後，初始化組件，而且從新激活組件。
  // 在從新激活組件中使用 insert 方法操做 DOM
    vnode.isRootInsert = !nested // for transition enter check
    if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
      return
    }

    const data = vnode.data
    const children = vnode.children
    const tag = vnode.tag
    if (isDef(tag)) {
    // 錯誤檢測，主要用於判斷是否正確註冊了component，這個錯誤仍是比較常見
      if (process.env.NODE_ENV !== 'production') {
        if (data && data.pre) {
          creatingElmInVPre++
        }
        if (isUnknownElement(vnode, creatingElmInVPre)) {
          warn(
            'Unknown custom element: <' + tag + '> - did you ' +
            'register the component correctly? For recursive components, ' +
            'make sure to provide the "name" option.',
            vnode.context
          )
        }
      }
      // nodeOps 封裝的操做dom的合集
      vnode.elm = vnode.ns
        ? nodeOps.createElementNS(vnode.ns, tag)
        : nodeOps.createElement(tag, vnode)
      setScope(vnode)
       // weex處理
      /* istanbul ignore if */
      if (__WEEX__) {
        // in Weex, the default insertion order is parent-first.
        // List items can be optimized to use children-first insertion
        // with append="tree".
        const appendAsTree = isDef(data) && isTrue(data.appendAsTree)
        if (!appendAsTree) {
          if (isDef(data)) {
            invokeCreateHooks(vnode, insertedVnodeQueue)
          }
          insert(parentElm, vnode.elm, refElm)
        }
        createChildren(vnode, children, insertedVnodeQueue)
        if (appendAsTree) {
          if (isDef(data)) {
            invokeCreateHooks(vnode, insertedVnodeQueue)
          }
          insert(parentElm, vnode.elm, refElm)
        }
      } else {
      // 用於建立子節點，若是子節點是數組，則遍歷執行 createElm 方法.
      // 若是子節點的 text 屬性有數據，則使用 nodeOps.appendChild(...) 在真實 DOM 中插入文本內容。
        createChildren(vnode, children, insertedVnodeQueue)
        if (isDef(data)) {
          invokeCreateHooks(vnode, insertedVnodeQueue)
        }
        // insert 用於將元素插入真實 DOM 中
        insert(parentElm, vnode.elm, refElm)
      }

      if (process.env.NODE_ENV !== 'production' && data && data.pre) {
        creatingElmInVPre--
      }
    } else if (isTrue(vnode.isComment)) {// 註釋
      vnode.elm = nodeOps.createComment(vnode.text)
      insert(parentElm, vnode.elm, refElm)
    } else { // 文本
      vnode.elm = nodeOps.createTextNode(vnode.text)
      insert(parentElm, vnode.elm, refElm)
    }
  }
複製代碼

經過以上的註釋，咱們能夠知道：createElm 方法的最終目的就是建立真實的 DOM 對象

patchVnode

仍是先來看一下patchVnode的代碼。

/*patch VNode節點*/
function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
/*兩個VNode節點相同則直接返回*/
    if (oldVnode === vnode) {
      return
    }

    const elm = vnode.elm = oldVnode.elm

    if (isTrue(oldVnode.isAsyncPlaceholder)) {
      if (isDef(vnode.asyncFactory.resolved)) {
        hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
      } else {
        vnode.isAsyncPlaceholder = true
      }
      return
    }

    // reuse element for static trees.
    // note we only do this if the vnode is cloned -
    // if the new node is not cloned it means the render functions have been
    // reset by the hot-reload-api and we need to do a proper re-render.
    /*
      若是新舊VNode都是靜態的，同時它們的key相同（表明同一節點），
      而且新的VNode是clone或者是標記了once（標記v-once屬性，只渲染一次），
      那麼只須要替換elm以及componentInstance便可。
    */
    if (isTrue(vnode.isStatic) &&
      isTrue(oldVnode.isStatic) &&
      vnode.key === oldVnode.key &&
      (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
    ) {
      vnode.componentInstance = oldVnode.componentInstance
      return
    }

    let i
    const data = vnode.data
    if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
    /*i = data.hook.prepatch，若是存在的話，見"./create-component componentVNodeHooks"。*/
      i(oldVnode, vnode)
    }

    const oldCh = oldVnode.children
    const ch = vnode.children
    if (isDef(data) && isPatchable(vnode)) {
     /*調用update回調以及update鉤子*/
      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)
    }
     /*若是這個VNode節點沒有text文本時*/
    if (isUndef(vnode.text)) {
      if (isDef(oldCh) && isDef(ch)) {
      /*新老節點均有children子節點，則對子節點進行diff操做，調用updateChildren*/
        if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
      } else if (isDef(ch)) {
      /*若是老節點沒有子節點而新節點存在子節點，先清空elm的文本內容，而後爲當前節點加入子節點*/
        if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
        addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
      } else if (isDef(oldCh)) {
      /*當新節點沒有子節點而老節點有子節點的時候，則移除全部ele的子節點*/
        removeVnodes(elm, oldCh, 0, oldCh.length - 1)
      } else if (isDef(oldVnode.text)) {
       /*當新老節點都無子節點的時候，只是文本的替換，由於這個邏輯中新節點text不存在，因此直接去除ele的文本*/
        nodeOps.setTextContent(elm, '')
      }
    } else if (oldVnode.text !== vnode.text) {
     /*當新老節點text不同時，直接替換這段文本*/
      nodeOps.setTextContent(elm, vnode.text)
    }
    /*調用postpatch鉤子*/
    if (isDef(data)) {
      if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
    }
  }
複製代碼

patchVnode的規則是這樣的：

1.若是新舊VNode都是靜態的，同時它們的key相同（表明同一節點），而且新的VNode是clone或者是標記了once（標記v-once屬性，只渲染一次），那麼只須要替換elm以及componentInstance便可。

2.新老節點均有children子節點，則對子節點進行diff操做，調用updateChildren，這個updateChildren也是diff的核心。

3.若是老節點沒有子節點而新節點存在子節點，先清空老節點DOM的文本內容，而後爲當前DOM節點加入子節點。

4.當新節點沒有子節點而老節點有子節點的時候，則移除該DOM節點的全部子節點。

5.當新老節點都無子節點的時候，只是文本的替換。

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
    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)) {
      /*前四種狀況實際上是指定key的時候，斷定爲同一個VNode，則直接patchVnode便可，分別比較oldCh以及newCh的兩頭節點2*2=4種狀況*/
        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 {
        /*
          生成一個key與舊VNode的key對應的哈希表（只有第一次進來undefined的時候會生成，也爲後面檢測重複的key值作鋪墊）
          好比childre是這樣的 [{xx: xx, key: 'key0'}, {xx: xx, key: 'key1'}, {xx: xx, key: 'key2'}]  beginIdx = 0   endIdx = 2  
          結果生成{key0: 0, key1: 1, key2: 2}
        */
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        /*若是newStartVnode新的VNode節點存在key而且這個key在oldVnode中能找到則返回這個節點的idxInOld（即第幾個節點，下標）*/
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        if (isUndef(idxInOld)) { // New element
         /*newStartVnode沒有key或者是該key沒有在老節點中找到則建立一個新的節點*/
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
        /*獲取同key的老節點*/
          vnodeToMove = oldCh[idxInOld]
          if (sameVnode(vnodeToMove, newStartVnode)) {
          /*若是新VNode與獲得的有相同key的節點是同一個VNode則進行patchVnode*/
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
             /*由於已經patchVnode進去了，因此將這個老節點賦值undefined，以後若是還有新節點與該節點key相同能夠檢測出來提示已有重複的key*/
            oldCh[idxInOld] = undefined
            /*當有標識位canMove實能夠直接插入oldStartVnode對應的真實DOM節點前面*/
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } else {
            // same key but different element. treat as new element
            /*當新的VNode與找到的一樣key的VNode不是sameVNode的時候（好比說tag不同或者是有不同type的input標籤），建立一個新的節點*/
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }
        newStartVnode = newCh[++newStartIdx]
      }
    }
    if (oldStartIdx > oldEndIdx) {
    /*所有比較完成之後，發現oldStartIdx > oldEndIdx的話，說明老節點已經遍歷完了，新節點比老節點多，因此這時候多出來的新節點須要一個一個建立出來加入到真實DOM中*/
      refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
      addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
    } else if (newStartIdx > newEndIdx) {
    /*若是所有比較完成之後發現newStartIdx > newEndIdx，則說明新節點已經遍歷完了，老節點多餘新節點，這個時候須要將多餘的老節點從真實DOM中移除*/
      removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
    }
  }
複製代碼

讓咱們來畫張圖屢一下大體的流程：

可能你看到這仍是雲裏霧裏有點理不清，不要緊，接下來咱們一點一點來消化：

定義初始變量：

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] // 新列表終點值
複製代碼

首先，在新老兩個VNode節點的左右頭尾兩側都有一個變量標記，在遍歷過程當中這幾個變量都會向中間靠攏。當oldStartIdx > oldEndIdx或者newStartIdx > newEndIdx時結束循環。

索引與VNode節點的對應關係： oldStartIdx => oldStartVnode oldEndIdx => oldEndVnode newStartIdx => newStartVnode newEndIdx => newEndVnode

在遍歷中，若是存在key，而且知足sameVnode，會將該DOM節點進行復用，不然則會建立一個新的DOM節點。

首先，oldStartVnode、oldEndVnode與newStartVnode、newEndVnode兩兩比較一共有2*2=4種比較方法。

當新老VNode節點的start或者end知足sameVnode時，也就是sameVnode(oldStartVnode, newStartVnode)或者sameVnode(oldEndVnode, newEndVnode)，直接將該VNode節點進行patchVnode便可。

若是oldStartVnode與newEndVnode知足sameVnode，即sameVnode(oldStartVnode, newEndVnode)。

這時候說明oldStartVnode已經跑到了oldEndVnode後面去了，進行patchVnode的同時還須要將真實DOM節點移動到oldEndVnode的後面。

若是oldEndVnode與newStartVnode知足sameVnode，即sameVnode(oldEndVnode, newStartVnode)。

這說明oldEndVnode跑到了oldStartVnode的前面，進行patchVnode的同時真實的DOM節點移動到了oldStartVnode的前面。

若是以上狀況均不符合，則經過createKeyToOldIdx會獲得一個oldKeyToIdx，裏面存放了一個key爲舊的VNode，value爲對應index序列的哈希表。從這個哈希表中能夠找到是否有與newStartVnode一致key的舊的VNode節點，若是同時知足sameVnode，patchVnode的同時會將這個真實DOM（elmToMove）移動到oldStartVnode對應的真實DOM的前面。

固然也有可能newStartVnode在舊的VNode節點找不到一致的key，或者是即使key相同卻不是sameVnode，這個時候會調用createElm建立一個新的DOM節點。

到這裏循環已經結束了，那麼剩下咱們還須要處理多餘或者不夠的真實DOM節點。

1.當結束時oldStartIdx > oldEndIdx，這個時候老的VNode節點已經遍歷完了，可是新的節點尚未。說明了新的VNode節點實際上比老的VNode節點多，也就是比真實DOM多，須要將剩下的（也就是新增的）VNode節點插入到真實DOM節點中去，此時調用addVnodes（批量調用createElm的接口將這些節點加入到真實DOM中去）。