寫文章不容易，點個讚唄兄弟 <br> <br> 專注 Vue 原始碼分享，文章分為白話版和 原始碼版，白話版助於理解工作原理，原始碼版助於瞭解內部詳情，讓我們一起學習吧 研究基於 Vue版本 【2.5.17】

如果你覺得排版難看，請點選 下面連結 或者 拉到 下面關注公眾號也可以吧

【Vue原理】Diff - 白話版

終於到了最後一塊內容了！今天我們就來簡單概括一下 Diff，內容一點都不多哦，全是圖片

Diff 作為 Vue 比較重要的一部分內容，還是非常有必要深入瞭解的

此篇文章就會分幾塊內容進行簡單闡述，不會出現任何的原始碼，只是為了幫助大家建立一種思路，瞭解下 Diff 的大概內容

1、Diff 的作用

2、Diff 的做法

3、Diff 的比較邏輯

4、簡單的例子

下面就開始我們的正文

---

Diff 作用

Diff 的出現，就會為了減少更新量，找到最小差異部分DOM，只更新差異部分DOM就好了

這樣消耗就會小一些

資料變化一下，沒必要把其他沒有涉及的沒有變化的DOM 也替換了

---

Diff 做法

Vue 只會對新舊節點中 父節點是相同節點 的 那一層子節點 進行比較

也可以說成是

只有兩個新舊節點是相同節點的時候，才會去比較他們各自的子節點

最大的根節點一開始可以直接比較

這也叫做 同層級比較，並不需要遞迴，雖然好像降低了一些複用性，也是為了避免過度優化，是一種很高效的 Diff 演算法

新舊節點是什麼

所有的 新舊節點 指的都是 Vnode 節點，Vue 只會比較 Vnode 節點，而不是比較 DOM

因為 Vnode 是 JS 物件，不受平臺限制，所以以它作為比較基礎，程式碼邏輯後期不需要改動

拿到比較結果後，根據不同平臺呼叫相應的方法進行處理就好了

想了解 Vnode 更多資訊可以轉到這篇文章 VNode - 原始碼版

父節點是相同節點是什麼意思？

比如下圖出現的 四次比較（從 first 到 fouth），他們的共同特點都是有 相同的父節點

比如 藍色方的比較，新舊子節點的父節點是相同節點 1

比如 紅色方的比較，新舊子節點的父節點都是 2

所以他們才有比較的機會

而下圖中，只有兩次比較，就是因為在 藍色方 比較中，並沒有相同節點，所以不會再進行下級子節點比較

---

Diff 比較邏輯

Diff 比較的核心是 節點複用，所以 Diff 比較就是為了在 新舊節點中 找到 相同的節點

這個的比較邏輯是建立在上一步說過的同層比較基礎之上的

所以說，節點複用，找到相同節點並不是無限制遞迴查詢

比如下圖中，的確 舊節點樹 和 新節點樹 中有相同節點 6，但是然並卵，舊節點6並不會被複用

就算在同一層級，然而父節點不一樣，依舊然並卵

只有這種情況的節點會被複用，相同父節點 8

下面說說 Diff 的比較邏輯

1、能不移動，儘量不移動

2、沒得辦法，只好移動

3、實在不行，新建或刪除

比較處理流程是下面這樣

在新舊節點中

1、先找到 不需要移動的相同節點，消耗最小

2、再找相同但是需要移動的節點，消耗第二小

3、最後找不到，才會去新建刪除節點，保底處理

比較是為了修改DOM 樹

其實這裡存在 三種樹，一個是 頁面DOM 樹，一個是 舊VNode 樹，一個是 新 Vnode 樹

頁面DOM 樹 和 舊VNode 樹 節點一一對應的

而 新Vnode 樹則是表示更新後 頁面DOM 樹 該有的樣子

這裡把 舊Vnode 樹 和 新Vnode樹 進行比較的過程中

不會對這兩棵Vode樹進行修改，而是以比較的結果直接對 真實DOM 進行修改

比如說，在 舊 Vnode 樹同一層中，找到 和 新Vnode 樹 中一樣但位置不一樣節點

此時需要移動這個節點，但是不是移動 舊 Vnode 樹 中的節點

而是 直接移動 DOM

總的來說，新舊 Vnode 樹是拿來比較的，頁面DOM 樹是拿來根據比較結果修改的

如果你有點懵，我們就來就簡單說個例子

---

Diff 簡單例子

比如下圖存在這兩棵 需要比較的新舊節點樹 和 一棵 需要修改的頁面 DOM樹

第一輪比較開始

因為父節點都是 1，所以開始比較他們的子節點

按照我們上面的比較邏輯，所以先找 相同 && 不需移動 的點

毫無疑問，找到 2

拿到比較結果，這裡不用修改DOM，所以 DOM 保留在原地

第二輪比較開始

然後，沒有 相同 && 不需移動 的節點 了

只能第二個方案，開始找相同的點

找到 節點5，相同但是位置不同，所以需要移動

拿到比較結果，頁面 DOM 樹需要移動DOM 了，不修改，原樣移動

第三輪比較開始

繼續，哦吼，相同節點也沒得了，沒得辦法了，只能建立了

所以要根據 新Vnode 中沒找到的節點去建立並且插入

然後舊Vnode 中有些節點不存在 新VNode 中，所以要刪除

於是開始建立節點 6 和 9，並且刪除節點 4 和 5

然後頁面就完成更新啦

怎麼樣，有沒有感興趣，感興趣就看原始碼吧哈哈

後面的就會出原始碼版啦

最後

鑑於本人能力有限，難免會有疏漏錯誤的地方，請大家多多包涵，如果有任何描述不當的地方，歡迎後臺聯絡本人，有重謝

相關推薦