摘要：的算法是基于的實(shí)現(xiàn)，并在些基礎(chǔ)上作了很多的調(diào)整和改進(jìn)。此時(shí)和之間的是新增的，調(diào)用，把這些虛擬全部插進(jìn)的后邊，可以認(rèn)為新節(jié)點(diǎn)先遍歷完。

為什么出現(xiàn)：

瀏覽器解析一個(gè)html大致分為五步：創(chuàng)建DOM tree –> 創(chuàng)建Style Rules -> 構(gòu)建Render tree -> 布局Layout –> 繪制Painting。每次對(duì)真實(shí)dom進(jìn)行操作的時(shí)候，瀏覽器都會(huì)從構(gòu)建dom樹(shù)開(kāi)始從頭到尾執(zhí)行一遍流程。真實(shí)的dom操作代價(jià)昂貴，操作頻繁還會(huì)引起頁(yè)面卡頓影響用戶體驗(yàn)，虛擬dom就是為了解決這個(gè)瀏覽器性能問(wèn)題才被創(chuàng)造出來(lái)

虛擬dom在執(zhí)行dom的更新操作后，虛擬dom不會(huì)直接操作真實(shí)dom，而是將更新的diff內(nèi)容保存到本地js對(duì)象中，然后一次性attach到dom樹(shù)上，通知瀏覽器進(jìn)行dom繪制避免大量無(wú)謂的計(jì)算。

如何實(shí)現(xiàn)：

js對(duì)象表示dom結(jié)構(gòu)，對(duì)象記錄了dom節(jié)點(diǎn)的標(biāo)簽、屬性和子節(jié)點(diǎn)

js對(duì)象的render函數(shù)通過(guò)對(duì)虛擬dom的屬性和子節(jié)點(diǎn)的遞歸構(gòu)建出真實(shí)dom樹(shù)

虛擬DOM是一個(gè)純粹的JS對(duì)象，可以通過(guò)document.createDocumentFragment 創(chuàng)建，Vue中一個(gè)虛擬DOM包含以下屬性：

tag: 當(dāng)前節(jié)點(diǎn)的標(biāo)簽名
data: 當(dāng)前節(jié)點(diǎn)的數(shù)據(jù)對(duì)象
children: 數(shù)組類型，包含了當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)
text: 當(dāng)前節(jié)點(diǎn)的文本，一般文本節(jié)點(diǎn)或注釋節(jié)點(diǎn)會(huì)有該屬性
elm: 當(dāng)前虛擬節(jié)點(diǎn)對(duì)應(yīng)的真實(shí)的dom節(jié)點(diǎn)
context: 編譯作用域
functionalContext: 函數(shù)化組件的作用域
key: 節(jié)點(diǎn)的key屬性，用于作為節(jié)點(diǎn)的標(biāo)識(shí)，有利于patch的優(yōu)化
sel: 節(jié)點(diǎn)的選擇器
componentOptions: 創(chuàng)建組件實(shí)例時(shí)會(huì)用到的選項(xiàng)信息
child: 當(dāng)前節(jié)點(diǎn)對(duì)應(yīng)的組件實(shí)例
parent: 組件的占位節(jié)點(diǎn)
raw: raw html
isStatic: 靜態(tài)節(jié)點(diǎn)的標(biāo)識(shí)
isRootInsert: 是否作為根節(jié)點(diǎn)插入，被包裹的節(jié)點(diǎn)，該屬性的值為false
isComment: 當(dāng)前節(jié)點(diǎn)是否是注釋節(jié)點(diǎn)
isCloned: 當(dāng)前節(jié)點(diǎn)是否為克隆節(jié)點(diǎn)
isOnce: 當(dāng)前節(jié)點(diǎn)是否有v-once指令

簡(jiǎn)單總結(jié)：虛擬DOM是將真實(shí)的DOM節(jié)點(diǎn)用JavaScript模擬出來(lái)，將DOM變化的對(duì)比，放到 Js 層來(lái)做。

優(yōu)勢(shì)：

跨平臺(tái)：Virtual DOM 是以 JavaScript 對(duì)象為基礎(chǔ)而不依賴真實(shí)平臺(tái)環(huán)境，所以使它具有了跨平臺(tái)的能力，比如說(shuō)瀏覽器平臺(tái)、Weex、Node 等。

提高DOM操作效率：DOM操作的執(zhí)行速度遠(yuǎn)不如Javascript的運(yùn)算速度快，因此，把大量的DOM操作搬運(yùn)到Javascript中，運(yùn)用patching算法來(lái)計(jì)算出真正需要更新的節(jié)點(diǎn)，最大限度地減少DOM操作，從而顯著提高性能。

提升渲染性能：在大量、頻繁的數(shù)據(jù)更新下，依托diff算法，能夠?qū)σ晥D進(jìn)行合理、高效的更新。

Vue.js通過(guò)編譯將template 模板轉(zhuǎn)換成渲染函數(shù)(render ) ，執(zhí)行渲染函數(shù)就可以得到一個(gè)虛擬節(jié)點(diǎn)樹(shù)

在對(duì) Model 進(jìn)行操作的時(shí)候，會(huì)觸發(fā)對(duì)應(yīng) Dep 中的 Watcher 對(duì)象。Watcher 對(duì)象會(huì)調(diào)用對(duì)應(yīng)的 update 來(lái)修改視圖。這個(gè)過(guò)程主要是將新舊虛擬節(jié)點(diǎn)進(jìn)行差異對(duì)比（patch），然后根據(jù)對(duì)比結(jié)果進(jìn)行DOM操作來(lái)更新視圖。

diff算法是一種優(yōu)化手段，將前后兩個(gè)模塊進(jìn)行差異對(duì)比，修補(bǔ)(更新)差異的過(guò)程叫做patch
patch：
虛擬DOM最核心的部分，它可以將vnode渲染成真實(shí)的DOM，這個(gè)過(guò)程是對(duì)比新舊虛擬節(jié)點(diǎn)之間有哪些不同，然后根據(jù)對(duì)比結(jié)果找出需要更新的的節(jié)點(diǎn)進(jìn)行更新。
patch本身就有補(bǔ)丁、修補(bǔ)的意思，其實(shí)際作用是在現(xiàn)有DOM上進(jìn)行修改來(lái)實(shí)現(xiàn)更新視圖的目的。Vue的Virtual DOM patching算法是基于Snabbdom的實(shí)現(xiàn)，并在些基礎(chǔ)上作了很多的調(diào)整和改進(jìn)。

當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，set方法會(huì)讓調(diào)用Dep.notify通知所有訂閱者Watcher，訂閱者就會(huì)調(diào)用patch給真實(shí)的DOM打補(bǔ)丁，更新相應(yīng)的視圖。

Vue的diff算法是僅在同級(jí)的vnode間做diff，遞歸地進(jìn)行同級(jí)vnode的diff，最終實(shí)現(xiàn)整個(gè)DOM樹(shù)的更新。因?yàn)榭鐚蛹?jí)的操作是非常少的，忽略不計(jì)，這樣時(shí)間復(fù)雜度就從O(n3)變成O(n)。

diff算法的假設(shè)

Web UI 中 DOM 節(jié)點(diǎn)跨層級(jí)的移動(dòng)操作特別少，可以忽略不計(jì)。

擁有相同類的兩個(gè)組件將會(huì)生成相似的樹(shù)形結(jié)構(gòu)，擁有不同類的兩個(gè)組件將會(huì)生成不同的樹(shù)形結(jié)構(gòu)。

對(duì)于同一層級(jí)的一組子節(jié)點(diǎn)，它們可以通過(guò)唯一 id 進(jìn)行區(qū)分。

當(dāng)新舊虛擬節(jié)點(diǎn)的key和sel都相同時(shí)，則進(jìn)行節(jié)點(diǎn)的深度patch，若不相同則整個(gè)替換虛擬節(jié)點(diǎn)，同時(shí)創(chuàng)建真實(shí)DOM，實(shí)現(xiàn)視圖更新。

如何判定新舊節(jié)點(diǎn)是否為同一節(jié)點(diǎn)：
當(dāng)兩個(gè)VNode的tag、key、isComment都相同，并且同時(shí)定義或未定義data的時(shí)候，且如果標(biāo)簽為input則type必須相同。這時(shí)候這兩個(gè)VNode則算sameVnode，可以直接進(jìn)行patchVnode操作。

function patch (oldVnode, vnode) {
    if (sameVnode(oldVnode, vnode)) { // 有必要進(jìn)行patch, key和sel都相同時(shí)才進(jìn)行patch
        patchVnode(oldVnode, vnode)
    } else {  // 沒(méi)有必要進(jìn)行patch, 整個(gè)替換
        const oEl = oldVnode.el
        let parentEle = api.parentNode(oEl)
        createEle(vnode) // vnode創(chuàng)建它的真實(shí)dom，令vnode.el =真實(shí)dom
        if (parentEle !== null) {
            api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 插入整個(gè)新節(jié)點(diǎn)樹(shù)
            api.removeChild(parentEle, oldVnode.el) // 移出整個(gè)舊的虛擬DOM
            oldVnode = null
        }
    }
    return vnode
}

深度patch：

 function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
    /*兩個(gè)VNode節(jié)點(diǎn)相同則直接返回*/
    if (oldVnode === vnode) {
      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都是靜態(tài)的，同時(shí)它們的key相同（代表同一節(jié)點(diǎn)），
      并且新的VNode是clone或者是標(biāo)記了once（標(biāo)記v-once屬性，只渲染一次），
      那么只需要替換elm以及componentInstance即可。
    */
    if (isTrue(vnode.isStatic) &&
        isTrue(oldVnode.isStatic) &&
        vnode.key === oldVnode.key &&
        (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))) {
      vnode.elm = oldVnode.elm
      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，如果存在的話，見(jiàn)"./create-component componentVNodeHooks"。*/
      i(oldVnode, vnode)
    }
    const elm = vnode.elm = oldVnode.elm
    const oldCh = oldVnode.children
    const ch = vnode.children
    if (isDef(data) && isPatchable(vnode)) {
      /*調(diào)用update回調(diào)以及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)
    }
    /*如果這個(gè)VNode節(jié)點(diǎn)沒(méi)有text文本時(shí)*/
    if (isUndef(vnode.text)) {
      if (isDef(oldCh) && isDef(ch)) {
        /*新老節(jié)點(diǎn)均有children子節(jié)點(diǎn)，則對(duì)子節(jié)點(diǎn)進(jìn)行diff操作，調(diào)用updateChildren*/
        if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
      } else if (isDef(ch)) {
        /*如果老節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)而新節(jié)點(diǎn)存在子節(jié)點(diǎn)，先清空elm的文本內(nèi)容，然后為當(dāng)前節(jié)點(diǎn)加入子節(jié)點(diǎn)*/
        if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, "")
        addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
      } else if (isDef(oldCh)) {
        /*當(dāng)新節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)而老節(jié)點(diǎn)有子節(jié)點(diǎn)的時(shí)候，則移除所有ele的子節(jié)點(diǎn)*/
        removeVnodes(elm, oldCh, 0, oldCh.length - 1)
      } else if (isDef(oldVnode.text)) {
        /*當(dāng)新老節(jié)點(diǎn)都無(wú)子節(jié)點(diǎn)的時(shí)候，只是文本的替換，因?yàn)檫@個(gè)邏輯中新節(jié)點(diǎn)text不存在，所以直接去除ele的文本*/
        nodeOps.setTextContent(elm, "")
      }
    } else if (oldVnode.text !== vnode.text) {
      /*當(dāng)新老節(jié)點(diǎn)text不一樣時(shí)，直接替換這段文本*/
      nodeOps.setTextContent(elm, vnode.text)
    }
    /*調(diào)用postpatch鉤子*/
    if (isDef(data)) {
      if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
    }
  }

patchVnode的規(guī)則

1.如果新舊VNode都是靜態(tài)的，同時(shí)它們的key相同（代表同一節(jié)點(diǎn)），那么只需要替換elm以及componentInstance即可（原地復(fù)用）。

2.新老節(jié)點(diǎn)均有children子節(jié)點(diǎn)且不同，則對(duì)子節(jié)點(diǎn)進(jìn)行diff操作，調(diào)用updateChildren，這個(gè)updateChildren也是diff的核心。

3.如果只有新節(jié)點(diǎn)存在子節(jié)點(diǎn)，先清空老節(jié)點(diǎn)DOM的文本內(nèi)容，然后為當(dāng)前DOM節(jié)點(diǎn)加入子節(jié)點(diǎn)。

4.如果只有老節(jié)點(diǎn)有子節(jié)點(diǎn)，直接刪除老節(jié)點(diǎn)的子節(jié)點(diǎn)。

5.當(dāng)新老節(jié)點(diǎn)都無(wú)子節(jié)點(diǎn)的時(shí)候，只是文本的替換。

接下來(lái)就是最復(fù)雜的diff算法的理解

updateChildren (parentElm, oldCh, newCh) {
    let oldStartIdx = 0, 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
    let idxInOld
    let elmToMove
    let before
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
        if (oldStartVnode == null) {   // 對(duì)于vnode.key的比較，會(huì)把oldVnode = null
            oldStartVnode = oldCh[++oldStartIdx] 
        }else if (oldEndVnode == null) {
            oldEndVnode = oldCh[--oldEndIdx]
        }else if (newStartVnode == null) {
            newStartVnode = newCh[++newStartIdx]
        }else if (newEndVnode == null) {
            newEndVnode = newCh[--newEndIdx]
        }else if (sameVnode(oldStartVnode, newStartVnode)) {
            patchVnode(oldStartVnode, newStartVnode)
            oldStartVnode = oldCh[++oldStartIdx]
            newStartVnode = newCh[++newStartIdx]
        }else if (sameVnode(oldEndVnode, newEndVnode)) {
            patchVnode(oldEndVnode, newEndVnode)
            oldEndVnode = oldCh[--oldEndIdx]
            newEndVnode = newCh[--newEndIdx]
        }else if (sameVnode(oldStartVnode, newEndVnode)) {
            patchVnode(oldStartVnode, newEndVnode)
            api.insertBefore(parentElm, oldStartVnode.el, api.nextSibling(oldEndVnode.el))
            oldStartVnode = oldCh[++oldStartIdx]
            newEndVnode = newCh[--newEndIdx]
        }else if (sameVnode(oldEndVnode, newStartVnode)) {
            patchVnode(oldEndVnode, newStartVnode)
            api.insertBefore(parentElm, oldEndVnode.el, oldStartVnode.el)
            oldEndVnode = oldCh[--oldEndIdx]
            newStartVnode = newCh[++newStartIdx]
        }else {
           // 使用key時(shí)的比較
            if (oldKeyToIdx === undefined) {
                oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) // 有key生成index表
            }
            idxInOld = oldKeyToIdx[newStartVnode.key]
            if (!idxInOld) {
                api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                newStartVnode = newCh[++newStartIdx]
            }
            else {
                elmToMove = oldCh[idxInOld]
                if (elmToMove.sel !== newStartVnode.sel) {
                    api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                }else {
                    patchVnode(elmToMove, newStartVnode)
                    oldCh[idxInOld] = null
                    api.insertBefore(parentElm, elmToMove.el, oldStartVnode.el)
                }
                newStartVnode = newCh[++newStartIdx]
            }
        }
    }
    if (oldStartIdx > oldEndIdx) {
        before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].el
        addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx)
    }else if (newStartIdx > newEndIdx) {
        removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
    }
}

將Vnode的子節(jié)點(diǎn)Vch和oldVnode的子節(jié)點(diǎn)oldCh提取出來(lái)

oldCh和vCh各有兩個(gè)頭尾的變量StartIdx和EndIdx，它們的2個(gè)變量相互比較，一共有4種比較方式，，當(dāng)其中兩個(gè)能匹配上那么真實(shí)dom中的相應(yīng)節(jié)點(diǎn)會(huì)移到Vnode相應(yīng)的位置。如果4種比較都沒(méi)匹配，如果設(shè)置了key，就會(huì)用key進(jìn)行比較，在比較的過(guò)程中，變量會(huì)往中間靠，一旦StartIdx>EndIdx表明oldCh和vCh至少有一個(gè)已經(jīng)遍歷完了，就會(huì)結(jié)束比較。

在新老兩個(gè)VNode節(jié)點(diǎn)的左右頭尾兩側(cè)都有一個(gè)變量標(biāo)記，在遍歷過(guò)程中這幾個(gè)變量都會(huì)向中間靠攏。當(dāng)oldStartIdx <= oldEndIdx或者newStartIdx <= newEndIdx時(shí)結(jié)束循環(huán)。

我們通過(guò)一個(gè)例子來(lái)理解整個(gè)對(duì)比過(guò)程：

真實(shí)節(jié)點(diǎn)：a，b，d

舊節(jié)點(diǎn)：a，b，d

新節(jié)點(diǎn)：a，c，d，b

第一步：

oldS = a, oldE = d；
S = a, E = b;

oldS和S，E比較；oldE和S，E比較，得出oldS和S匹配的結(jié)論，于是a節(jié)點(diǎn)應(yīng)該按照新節(jié)點(diǎn)的順序放置在第一個(gè)。此時(shí)舊節(jié)點(diǎn)的a節(jié)點(diǎn)也在第一個(gè)，故而位置不動(dòng)；

第一輪對(duì)比結(jié)束oldS和S為同一節(jié)點(diǎn)，向后移動(dòng)，oldE和E不動(dòng)；

第二步：

舊節(jié)點(diǎn)：a，b，d

新節(jié)點(diǎn)：a，c，d，b

oldS = b, oldE = d；
S = c, E = b;

四個(gè)變量?jī)奢v對(duì)比可得oldS和E匹配，將原本的b節(jié)點(diǎn)移動(dòng)到最后，因?yàn)?b>E是最后一個(gè)節(jié)點(diǎn)，他們位置要一致，這就是上面說(shuō)的：當(dāng)其中兩個(gè)能匹配上那么真實(shí)dom中的相應(yīng)節(jié)點(diǎn)會(huì)移到Vnode相應(yīng)的位置；

第二輪對(duì)比結(jié)束，oldE和E為同一節(jié)點(diǎn)，向前移動(dòng)，oldS和S位置不動(dòng)；

第三步：

舊節(jié)點(diǎn)：a，d，b

新節(jié)點(diǎn)：a，c，d，b

oldS = d, oldE = d；
S = c, E = d;

oldE和E匹配，位置不變;

第四步：

舊節(jié)點(diǎn)：a，d，b

新節(jié)點(diǎn)：a，c，d，b

oldS++;
oldE--;
oldS > oldE;

遍歷結(jié)束，說(shuō)明舊節(jié)點(diǎn)先遍歷完。就將剩余的新節(jié)點(diǎn)c根據(jù)自己的的index插入到真實(shí)dom中去

舊節(jié)點(diǎn)：a，c，d，b

新節(jié)點(diǎn)：a，c，d，b

對(duì)比完成。

當(dāng)然也會(huì)存在四個(gè)變量無(wú)法互相匹配，分為兩種情況

如果新舊子節(jié)點(diǎn)都存在key，那么會(huì)根據(jù)舊節(jié)點(diǎn)的key生成一張hash表，用S的key與hash表做匹配，匹配成功就判斷S和匹配節(jié)點(diǎn)是否為sameNode，如果是，就在真實(shí)dom中將成功的節(jié)點(diǎn)移到最前面，否則，將S生成對(duì)應(yīng)的節(jié)點(diǎn)插入到dom中對(duì)應(yīng)的oldS位置，oldS和S指針向中間移動(dòng)。

如果沒(méi)有key,則直接將S生成新的節(jié)點(diǎn)插入真實(shí)DOM （這里可以解釋為什么設(shè)置key會(huì)讓diff更高效

結(jié)束時(shí)存在兩種具體的情況：

oldS > oldE，可以認(rèn)為舊節(jié)點(diǎn)先遍歷完。當(dāng)然也有可能新節(jié)點(diǎn)此時(shí)也正好完成了遍歷，統(tǒng)一都?xì)w為此類。此時(shí)S和E之間的vnode是新增的，調(diào)用addVnodes，把這些虛擬node.elm全部插進(jìn)before的后邊.

S> E，可以認(rèn)為新節(jié)點(diǎn)先遍歷完。此時(shí)oldS和oldE之間的節(jié)點(diǎn)在新的子節(jié)點(diǎn)里已經(jīng)不存在了，直接刪除

在模擬兩個(gè)例子體會(huì)一下

eg.1
O b,a,d,f,e
N a,b,e
1. 
oldS = b, oldE = e；
S = a, E = e;
O b,a,d,f,e
N a,b,e
2.
oldS = b, oldE = f；
S = a, E = b;
O a,d,f,b,e
N a,b,e
3.
s>e d,f 刪除
O a,b,e
N a,b,e

eg.2
O b,d,c,a
N a,e,b,f
1. 
oldS = b, oldE = a；
S = a, E = f;
O a,b,d,c
N a,e,b,f
2.
oldS = d, oldE = c；
S = e, E = f;
此時(shí)四個(gè)參數(shù)無(wú)法匹配，根據(jù)key來(lái)對(duì)比O中是否有S對(duì)應(yīng)的節(jié)點(diǎn)，沒(méi)有，則在O的S位置插入對(duì)應(yīng)節(jié)點(diǎn)
O a,e,d,b,c
N a,e,b,f
3.
oldS = d, oldE = c；
S = b, E = f;
此時(shí)四個(gè)參數(shù)無(wú)法匹配,根據(jù)key查找是否有S對(duì)應(yīng)的B節(jié)點(diǎn)，有，移動(dòng)到S當(dāng)前的位置
O a,e,b,d,c
N a,e,b,f
4.
oldS = d, oldE = c；
S = f, E = f;
此時(shí)四個(gè)參數(shù)無(wú)法匹配,根據(jù)key查找是否有S對(duì)應(yīng)的f節(jié)點(diǎn),沒(méi)有，則在O的S位置插入對(duì)應(yīng)節(jié)點(diǎn)
O a,e,b,d,c,f
N a,e,b,f
5.
oldS = d, oldE = c；
s>f
循環(huán)結(jié)束，oldS與oldE之間的節(jié)點(diǎn)刪除

總結(jié)：

盡量不要跨層級(jí)的修改dom

在開(kāi)發(fā)組件時(shí)，保持穩(wěn)定的 DOM 結(jié)構(gòu)會(huì)有助于性能的提升

設(shè)置key可以讓diff更高效

參考：

詳解Vue中的虛擬DOM

VirtualDOM與diff(Vue實(shí)現(xiàn))

虛擬DOM介紹

數(shù)據(jù)更新到視圖更新，Vue做了什么

詳解vue的diff算法