本篇文章帶大家了解一下Vue2中的雙端diff算法，并聊聊Vue2 是如何更新節(jié)點(diǎn)的，希望對(duì)大家有所幫助！

今天我們來聊聊 Vue2 的雙端 diff 算法。（學(xué)習(xí)視頻分享：vue視頻教程）

為什么要聊呢，最直白的原因就是面試會(huì)考，當(dāng)面試官問你 key 的作用，十有八九都會(huì)引到 diff 算法。

沒辦法，面試問咱們就只能學(xué)，好在也不怎么難，跟著我一起看看吧。

篇幅原因，本文并不會(huì)介紹虛擬 DOM 樹是如何生成的，僅講解在數(shù)據(jù)更新時(shí)，是如何比較兩顆虛擬 DOM 樹并更新真實(shí) DOM 的，主要實(shí)現(xiàn) Vue2 源碼中的 patchVnode、updateChildren 函數(shù)

預(yù)備知識(shí)

diff 算法作用

聊 diff 算法前得認(rèn)識(shí)一下它是干嘛的。

我們知道在網(wǎng)頁運(yùn)行中，我們改變一些數(shù)據(jù)，它們可能會(huì)影響到 DOM 樹。如何在頁面中展示最新的數(shù)據(jù)呢，最簡(jiǎn)單的方式就是整棵樹推到重建，當(dāng)然這樣會(huì)導(dǎo)致大量的浪費(fèi)，所以 Vue 使用虛擬 DOM 保存頁面中 DOM 樹的狀態(tài)，在數(shù)據(jù)變化后，構(gòu)建一棵新的虛擬 DOM 樹，找到前后兩顆樹的不同之處，針對(duì)性地更新真實(shí) DOM。

而如何找到兩顆樹的不同之處，減少 DOM 元素的銷毀與重建，就是 diff 算法的作用

虛擬 DOM

虛擬 DOM，又稱虛擬節(jié)點(diǎn)(vnode)，簡(jiǎn)單來說就是包含 DOM 元素信息的對(duì)象，一般由 h 函數(shù)創(chuàng)建，下面這個(gè)對(duì)象就可以看成是一個(gè)虛擬節(jié)點(diǎn)

const vnode = {     tag: 'div', // 標(biāo)簽類型     text: '', // 文本內(nèi)容     children: undefined, // 子節(jié)點(diǎn) }

對(duì)于這段 HTML

<div>     <p>a</p>     <p>b</p>     <p>c</p> </div>

轉(zhuǎn)換成 vnode 是這樣的

const vnode = {     tag: 'div', // 標(biāo)簽類型     text: undefined, // 文本內(nèi)容     children: [ // 子節(jié)點(diǎn)         {             tag: 'p',             text: 'a',             children: undefined,         },         {             tag: 'p',             text: 'b',             children: undefined,         },         {             tag: 'p',             text: 'c',             children: undefined,         },     ], }

因?yàn)槲覀冃枰ㄟ^虛擬節(jié)點(diǎn)去操作真實(shí) DOM，所以 vnode 身上有個(gè) elm 屬性指向真實(shí)的 DOM 元素。而且在之后的 diff 算法中，還會(huì)用到一個(gè) key 來對(duì)節(jié)點(diǎn)進(jìn)行唯一標(biāo)識(shí)，所以下文中的 vnode 是這樣的對(duì)象

const vnode = {     tag: 'div', // 標(biāo)簽類型     text: '', // 文本內(nèi)容     children: undefined, // 子節(jié)點(diǎn)     elm: undefined, // 對(duì)應(yīng)的真實(shí)DOM     key: '', // 唯一標(biāo)識(shí) }

Vue 的虛擬節(jié)點(diǎn)還有很多屬性，不過與 diff 算法無關(guān)，就不列舉了

說明一點(diǎn)，虛擬節(jié)點(diǎn)的 text 和 children 不會(huì)同時(shí)有值。在有 children 屬性的情況下，text 中的內(nèi)容會(huì)轉(zhuǎn)化為一個(gè)文本節(jié)點(diǎn)置入 children 數(shù)組中

預(yù)備函數(shù)

為了使等會(huì)的代碼實(shí)現(xiàn)更簡(jiǎn)單，我們準(zhǔn)備幾個(gè)函數(shù)，功能不難，直接貼代碼了

我們首先需要就是一個(gè)將虛擬節(jié)點(diǎn)轉(zhuǎn)換為真實(shí) DOM 的函數(shù)

// 根據(jù)虛擬節(jié)點(diǎn)創(chuàng)建真實(shí)節(jié)點(diǎn) function createElement(vnode) {     const dom = document.createElement(vnode.tag)     if (vnode.children) {         // 包含子節(jié)點(diǎn)，遞歸創(chuàng)建         for (let i = 0; i < vnode.children.length; i++) {             const childDom = createElement(vnode.children[i])             dom.appendChild(childDom)         }     } else {         // 內(nèi)部是文字         dom.innerHTML = vnode.text     }     // 補(bǔ)充elm屬性     vnode.elm = dom     return dom }

以及三個(gè)工具函數(shù)

// 判斷是否未定義 function isUndef(v) {     return v === undefined || v === null } // 判斷是否已定義 function isDef(v) {     return v !== undefined && v !== null } // 檢查是否可復(fù)用 function checkSameVnode(a, b) {     return a.tag === b.tag && a.key === b.key }

patchVnode

當(dāng)數(shù)據(jù)更新后，Vue 創(chuàng)建出一棵新 vnode，然后執(zhí)行 patchVnode 函數(shù)比較新老兩個(gè)虛擬節(jié)點(diǎn)的不同之處，然后根據(jù)情況進(jìn)行處理

function patchVnode(newVnode, oldVnode) {}

首先判斷新舊兩個(gè)虛擬節(jié)點(diǎn)是同一對(duì)象，如果是的話就不用處理

if (oldVnode === newVnode) return

然后將舊節(jié)點(diǎn)的 DOM 元素賦給新節(jié)點(diǎn)，并獲取新舊節(jié)點(diǎn)的 children 屬性

let elm = (newVnode.elm = oldVnode.elm) let oldCh = oldVnode.children let newCh = newVnode.children

這里可以直接賦值是因?yàn)檎{(diào)用 patchVnode 的新舊節(jié)點(diǎn)它們的 tag 與 key 是一定相同的，在下文會(huì)有講解

然后根據(jù)兩個(gè)節(jié)點(diǎn)內(nèi)容，決定如何更新 DOM

1、新舊兩個(gè)節(jié)點(diǎn)內(nèi)容都是文本。修改文本即可

if (isUndef(oldCh) && isUndef(newCh)) {     if (newVnode.text !== oldVnode.text) {         elm.innerText = newVnode.text     } }

2、舊節(jié)點(diǎn)有子節(jié)點(diǎn)，新節(jié)點(diǎn)內(nèi)容是文本。清空舊節(jié)點(diǎn)內(nèi)容，改為文本

if (isDef(oldCh) && isUndef(newCh)) {     elm.innerHTML = newVnode.text }

3、舊節(jié)點(diǎn)內(nèi)容是文本，新節(jié)點(diǎn)有子節(jié)點(diǎn)。清空舊節(jié)點(diǎn)內(nèi)容，遍歷新節(jié)點(diǎn)生成子 DOM 元素插入節(jié)點(diǎn)中

if (isUndef(oldCh) && isDef(newCh)) {     elm.innerHTML = ''     for (let i = 0, n = newCh.length; i < n; i++){         elm.appendChild(createElement(newCh[i]))     } }

4、新舊節(jié)點(diǎn)都有子節(jié)點(diǎn)。調(diào)用 updateChildren 來處理，該函數(shù)在下一章講解

if (isDef(oldCh) && isDef(newCh)) {     updateChildren(elm, oldCh, newCh) }

情況 4 可以與情況 3 的處理一樣，清空舊節(jié)點(diǎn)，然后遍歷生成新 DOM。但是我們要知道，創(chuàng)建 DOM 元素是一件非常耗時(shí)的工作，而且新舊子節(jié)點(diǎn)在大多時(shí)候都是相同的，如果可以復(fù)用，將極大優(yōu)化我們的性能。

那我們要如何判定一個(gè)節(jié)點(diǎn)是否可以復(fù)用呢？

這就需要 Vue 的使用者來幫忙了，使用者在節(jié)點(diǎn)上定義 key 屬性，告訴 Vue 哪些節(jié)點(diǎn)可以復(fù)用

只要標(biāo)簽類型與 key 值都相等，就說明當(dāng)前元素可以被復(fù)用

然而在我們的項(xiàng)目中，一般只有在 v-for 中才設(shè)置 key，其他節(jié)點(diǎn)都沒設(shè)置 key

其實(shí)沒有設(shè)置 key 的節(jié)點(diǎn)，它們的 key 值默認(rèn)相等

事實(shí)也是如此，我們項(xiàng)目中大部分元素都可以復(fù)用，只有 v-for 生成的子元素，它依賴的數(shù)組可能發(fā)生一些較復(fù)雜的變化，所以才需要明確標(biāo)注 key 值，以幫助 Vue 盡可能地復(fù)用節(jié)點(diǎn)。

patchVnode 的內(nèi)容當(dāng)然不止這些，還有樣式、類名、props等數(shù)據(jù)的對(duì)比更換，篇幅原因本文將其省略了。

updateChildren

為什么采用雙端 diff

好了，Vue 的使用者為每個(gè)節(jié)點(diǎn)的設(shè)置了 key，我們要如何從老節(jié)點(diǎn)中找到 key 相等的節(jié)點(diǎn)復(fù)用元素呢？

簡(jiǎn)單的方式就是窮舉遍歷，對(duì)于每個(gè)新節(jié)點(diǎn)的 key 遍歷所有老節(jié)點(diǎn)，找到了就移動(dòng)到首位，沒找到就創(chuàng)建添加。

然而這明顯有優(yōu)化的空間，Vue 實(shí)現(xiàn)這部分功能時(shí)借鑒了 snabbdom 的雙端 diff 算法，因?yàn)榇怂惴▽⑽覀兤綍r(shí)操作數(shù)組常見的 4 種情況抽離了出來，涵蓋了我們業(yè)務(wù)中的大多數(shù)場(chǎng)景，將 O(n²) 的時(shí)間復(fù)雜度降到了 O(n)

接下來我們來學(xué)習(xí)這是如何實(shí)現(xiàn)的

函數(shù)實(shí)現(xiàn)

函數(shù)實(shí)現(xiàn)較為復(fù)雜，我直接把完整的代碼放上來，再帶領(lǐng)大家一段段解讀

// 三個(gè)參數(shù)為：父DOM元素，舊的子節(jié)點(diǎn)數(shù)組，新的子節(jié)點(diǎn)數(shù)組 function updateChildren(parentElm, oldCh, newCh) {     // 舊前索引     let oldStartIdx = 0     // 新前索引     let newStartIdx = 0     // 舊后索引     let oldEndIdx = oldCh.length - 1     // 新后索引     let newEndIdx = newCh.length - 1     // 四個(gè)索引對(duì)應(yīng)節(jié)點(diǎn)     let oldStartVnode = oldCh[0]     let newStartVnode = newCh[0]     let oldEndVnode = oldCh[oldEndIdx]     let newEndVnode = newCh[newEndIdx]      let keyMap      // 開始循環(huán)     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {         // 跳過空節(jié)點(diǎn) (和最后一種情況有關(guān))         if (isUndef(oldStartVnode)) {             oldStartVnode = oldCh[++oldStartIdx]         } else if (isUndef(oldEndVnode)) {             oldEndVnode = oldCh[--oldEndIdx]         } else if (checkSameVnode(oldStartVnode, newStartVnode)) {             // 情況1             // 舊前和新前相等，不需要移動(dòng)             patchVnode(newStartVnode, oldStartVnode)             oldStartVnode = oldCh[++oldStartIdx]             newStartVnode = newCh[++newStartIdx]         } else if (checkSameVnode(oldEndVnode, newEndVnode)) {             // 情況2             // 舊后和新后相等，也不需要移動(dòng)             patchVnode(newEndVnode, oldEndVnode)             oldEndVnode = oldCh[--oldEndIdx]             newEndVnode = newCh[--newEndIdx]         } else if (checkSameVnode(oldStartVnode, newEndVnode)) {             // 情況3             // 舊前和新后相等             // 舊序列的第一個(gè)節(jié)點(diǎn)，變成了新序列的最后一個(gè)節(jié)點(diǎn)             // 需要將這個(gè)節(jié)點(diǎn)移動(dòng)到舊序列最后一個(gè)節(jié)點(diǎn)的后面             // 也就是最后一個(gè)節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)的前面             parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling)             patchVnode(newEndVnode, oldStartVnode)             oldStartVnode = oldCh[++oldStartIdx]             newEndVnode = newCh[--newEndIdx]         } else if (checkSameVnode(oldEndVnode, newStartVnode)) {             // 情況4             // 舊后和新前相等             // 舊序列的最后一個(gè)節(jié)點(diǎn)，變成了新序列的第一個(gè)節(jié)點(diǎn)             // 需要將這個(gè)節(jié)點(diǎn)移動(dòng)到舊序列第一個(gè)節(jié)點(diǎn)的前面             parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm)             patchVnode(newStartVnode, oldEndVnode)             oldEndVnode = oldCh[--oldEndIdx]             newStartVnode = newCh[++newStartIdx]         } else {             // 以上四種情況都不符合             // 制作舊節(jié)點(diǎn)key的映射對(duì)象             // 鍵為 key，值為 索引             if (!keyMap) {                 keyMap = {}                 for (let i = oldStartIdx; i <= oldEndIdx; i++) {                     keyMap[oldCh[i].key] = i                 }             }             // 尋找當(dāng)前新節(jié)點(diǎn)在keyMap中映射的位置序號(hào)             const idxInOld = keyMap[newStartVnode.key]             if (isUndef(idxInOld)) {                 // 沒有找到，表示他是全新的項(xiàng)                 // 轉(zhuǎn)化為DOM節(jié)點(diǎn)，加入舊序列第一個(gè)節(jié)點(diǎn)的前面                 parentElm.insertBefore(createElement(newStartVnode), oldStartVnode.elm)             } else {                 // 不是全新的項(xiàng)，需要移動(dòng)                 const oldVnode = oldCh[idxInOld]                 // 移動(dòng)到舊序列第一個(gè)節(jié)點(diǎn)之前                 parentElm.insertBefore(oldVnode.elm, oldStartVnode.elm)                 patchVnode(oldVnode, newStartVnode)                 // 把這項(xiàng)設(shè)置成空，循環(huán)時(shí)遇到時(shí)跳過                 oldCh[idxInOld] = undefined             }             // 當(dāng)前新節(jié)點(diǎn)處理完畢，下一輪循環(huán)處理下一個(gè)新節(jié)點(diǎn)             newStartVnode = newCh[++newStartIdx]         }     }      // 循環(huán)結(jié)束了，start還是比end小，說明有節(jié)點(diǎn)沒有處理到     if (newStartIdx <= newEndIdx) {         // 新節(jié)點(diǎn)沒有處理到，則創(chuàng)建按DOM添加到新序列最后一個(gè)節(jié)點(diǎn)的前面         for (let i = newStartIdx; i <= newEndIdx; i++) {             // insertBefore方法傳入null則添加到隊(duì)尾             const before = newCh[newEndIdx + 1]?.elm || null             parentElm.insertBefore(createElement(newCh[i]), before)         }     } else if (oldStartIdx <= oldEndIdx) {         // 舊節(jié)點(diǎn)沒有處理到，刪除         for (let i = oldStartIdx; i <= oldEndIdx; i++) {             parentElm.removeChild(oldCh[i].elm)         }     } }

代碼注釋中及下文的新/舊序列，僅包含從新/舊開始索引到結(jié)束索引間的節(jié)點(diǎn)，也就是還未處理的節(jié)點(diǎn)序列，而不是整個(gè)子節(jié)點(diǎn)數(shù)組。

根據(jù)例子講解

我們以下圖的例子，來講解這個(gè)函數(shù)的運(yùn)行流程（方框中的內(nèi)容為子節(jié)點(diǎn)的 key，所有節(jié)點(diǎn)標(biāo)簽相同）

首先定義了 8 個(gè)變量，表示新舊序列的開始和結(jié)束位置的索引與節(jié)點(diǎn)

然后開始循環(huán)，初始時(shí)節(jié)點(diǎn)都不為空

第一次循環(huán)命中情況 1，舊前與新前(key)相等

這表示舊序列的第一個(gè)節(jié)點(diǎn)到新序列仍是第一個(gè)節(jié)點(diǎn)，也就不需要移動(dòng)，但還需要比較一下節(jié)點(diǎn)的內(nèi)容有沒有改變(patchVnode)，并且讓新舊開始索引都前進(jìn)一步

// 比較節(jié)點(diǎn)的數(shù)據(jù)及子節(jié)點(diǎn)，并且將舊節(jié)點(diǎn)的DOM賦給新節(jié)點(diǎn) patchVnode(newStartVnode, oldStartVnode) oldStartVnode = oldCh[++oldStartIdx] newStartVnode = newCh[++newStartIdx]

情況 1 是業(yè)務(wù)中最常見的，表示從前至后兩兩比較。一般把商品添加到購物車末尾，或是沒有設(shè)置 key 值的子節(jié)點(diǎn)，都是依靠情況 1 把可復(fù)用的節(jié)點(diǎn)篩選完畢。

第二次循環(huán)命中情況 2，舊后和新后相等

這表示序列的末尾節(jié)點(diǎn)到新序列仍是末尾節(jié)點(diǎn)，也不需要移動(dòng)，然后讓新舊結(jié)束索引都后退一步

patchVnode(newEndVnode, oldEndVnode) oldEndVnode = oldCh[--oldEndIdx] newEndVnode = newCh[--newEndIdx]

情況 2 是情況 1 的補(bǔ)充，表示從后向前兩兩比較。有時(shí)會(huì)把新發(fā)布的評(píng)論插到開頭，或者從購物車刪除了一些商品，這時(shí)僅依靠情況 1 就無法迅速的篩選可復(fù)用節(jié)點(diǎn)，所以需要從后向前比較來配合。

第三次循環(huán)命中情況 3，舊前和新后相等

這表示舊序列的第一個(gè)節(jié)點(diǎn)，變成了新序列的最后一個(gè)節(jié)點(diǎn)。需要將這個(gè)節(jié)點(diǎn)移動(dòng)到序列的末尾，也就是舊序列末尾節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)(節(jié)點(diǎn) e)的前面

parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling)

然后比較新舊節(jié)點(diǎn)，修改索引

patchVnode(newEndVnode, oldStartVnode) oldStartVnode = oldCh[++oldStartIdx] newEndVnode = newCh[--newEndIdx]

情況 3 主要處理數(shù)組反轉(zhuǎn)的情況，比如升序改降序，每個(gè)起始節(jié)點(diǎn)被移動(dòng)到了末尾的位置，使用此情況將它們重新排序。

第四次循環(huán)命中情況 4，舊后與新前相等

這表示舊序列的最后一個(gè)節(jié)點(diǎn)，變成了新序列的第一個(gè)節(jié)點(diǎn)。需要將這個(gè)節(jié)點(diǎn)移動(dòng)到序列的開頭，也就是舊序列開始節(jié)點(diǎn)（節(jié)點(diǎn) c）的前面

parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling)

到這里說一下，圖上標(biāo)注的是節(jié)點(diǎn) a 的后面，是因?yàn)楣?jié)點(diǎn) b 被移動(dòng)到了末尾

節(jié)點(diǎn)的移動(dòng)都是根據(jù)舊節(jié)點(diǎn)來定位的，如果想把一個(gè)節(jié)點(diǎn)放到序列的開頭，就放到舊序列開始節(jié)點(diǎn)的前面；如果想把一個(gè)節(jié)點(diǎn)放到序列的末尾，就要放到舊序列結(jié)束節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)的前面

然后也是比較新舊節(jié)點(diǎn)，修改索引，之后是下圖情況

patchVnode(newStartVnode, oldEndVnode) oldEndVnode = oldCh[--oldEndIdx] newStartVnode = newCh[++newStartIdx]

情況 4 是情況 3 的補(bǔ)充，避免反轉(zhuǎn)數(shù)組后又插入/刪除了節(jié)點(diǎn)導(dǎo)致情況 3 無法匹配，本例就是這個(gè)情況。

第五次循環(huán)，4 種情況均為未命中

很遺憾，無法迅速鎖定節(jié)點(diǎn)的位置，只能用傳統(tǒng)的方式進(jìn)行遍歷

我們這里選擇了以空間換時(shí)間的方式，定義了 keyMap，將舊序列節(jié)點(diǎn)的 key 與索引存起來，然后使用新開始節(jié)點(diǎn)的 key 去查找。

如果沒找到，說明這是一個(gè)新節(jié)點(diǎn)，創(chuàng)建節(jié)點(diǎn)并放到開頭，也就是插入到舊序列開始節(jié)點(diǎn)的前面

但如果找到了，則同樣移動(dòng)節(jié)點(diǎn)到序列開頭，然后將對(duì)應(yīng)的舊節(jié)點(diǎn)索引置空，在以后循環(huán)遇到空的舊節(jié)點(diǎn)就跳過了

本例中是未找到的情況，此節(jié)點(diǎn)處理完畢，新開始索引加一，超過了新結(jié)束索引，不滿足循環(huán)條件，退出循環(huán)

然而，節(jié)點(diǎn) c 并沒有被處理，此時(shí)的 DOM 序列為：a,d,f,c,b,e

所以在循環(huán)之后，要檢測(cè)是否有未處理的節(jié)點(diǎn)，如果是舊節(jié)點(diǎn)未處理，刪除即可；

如果是新節(jié)點(diǎn)未處理，則創(chuàng)建新節(jié)點(diǎn)插入到舊序列的末尾或者舊序列的開頭，二者其實(shí)是一個(gè)位置

我們假設(shè)舊節(jié)點(diǎn)中沒有 c，則在第四次循環(huán)后就會(huì)出現(xiàn)以下情況（第四次循環(huán)命中的是情況 1）

如果把 f 放到序列的開頭，就是舊開始節(jié)點(diǎn)（節(jié)點(diǎn) e）的前面

而如果把 f 放到序列的末尾，也就是舊結(jié)束節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)（節(jié)點(diǎn) e）的前面

此時(shí)舊序列就是一個(gè)點(diǎn)，不分開頭和結(jié)尾，只要保證新增節(jié)點(diǎn)序列按序添加就好了

至此，雙端 diff 算法就講完了

Vue 中的 key

學(xué)完 diff 算法，再聊聊 key 的作用

v-for 中的 key

上面講的都是有 key 情況下，diff 算法能夠迅速找到新舊序列中的同一節(jié)點(diǎn)，以較小的代價(jià)完成更新。

而如果在 v-for 中不設(shè)置 key 呢？

假設(shè)我們?cè)跀?shù)組頭部插入了一個(gè)新節(jié)點(diǎn)，然后開始循環(huán)，每次循環(huán)都命中情況 1，嘗試“復(fù)用”此節(jié)點(diǎn)。

但是，在對(duì)比新舊節(jié)點(diǎn)的內(nèi)容時(shí)，都會(huì)發(fā)現(xiàn)內(nèi)容不同，需要用新節(jié)點(diǎn)的內(nèi)容替換舊節(jié)點(diǎn)。這只是復(fù)用了 DOM 的外殼，節(jié)點(diǎn)的內(nèi)容、數(shù)據(jù)以及該節(jié)點(diǎn)的子節(jié)點(diǎn)全都要更改。

相比有 key 時(shí)的只添加一個(gè)新節(jié)點(diǎn)，無 key 則將所有節(jié)點(diǎn)都修改一遍。

v-if 自帶 key

v-for 以外的元素我們一般是不設(shè)置 key 的，但是如果子元素中有 v-if 的話，就像下面這個(gè)場(chǎng)景（abcd是內(nèi)容，并不是 key），更新子元素又會(huì)復(fù)現(xiàn)上一節(jié)的情況。

然而 Vue 官方也考慮到了這點(diǎn)，會(huì)為 v-if 的元素加上利用 hash 函數(shù)生成的唯一 key

// 以下出自 v2 源碼 var needsKey = !!el.if  …… needsKey ? ',null,false,' + hash(generatedSlots) : ''

key 的另一個(gè)用法

順便再提一嘴，key 可以綁到任意元素上，當(dāng) key 發(fā)生變化時(shí)，會(huì)導(dǎo)致 DOM 的銷毀與重建，一般用來重復(fù)觸發(fā)動(dòng)畫或生命周期鉤子。

詳情可看官方鏈接

https://cn.vuejs.org/v2/api/#key

結(jié)語

不記得這是第幾次梳理雙端 diff 的邏輯了，很早之前就已經(jīng)擁抱 v3 了，把 v2 的響應(yīng)式原理和 diff 算法總結(jié)一遍也算是給 v2 畫上句號(hào)了。

沒想到這篇文章寫了 4000 多字，為此還特意去翻看了 v2 的源碼。本文的代碼和 v2 差別還是蠻大的，主要參考的是 snabbdom 和以前的教程，加了點(diǎn)自己的風(fēng)格將 patchVnode 和 updateChildren 實(shí)現(xiàn)了一遍。

接下來就能心無旁騖地看 v3 的源碼了……

整理不易，如果有所幫助的話，希望能點(diǎn)贊關(guān)注，鼓勵(lì)一下作者。

原文地址：https://juejin.cn/post/7120919895713251335

作者：清隆

【相關(guān)視頻教程推薦：vuejs入門教程、web前端入門】