【Vue原理】Diff - 白話版

寫文章不容易，點個讚唄兄弟

專一 Vue 源碼分享，文章分爲白話版和 源碼版，白話版助於理解工做原理，源碼版助於瞭解內部詳情，讓咱們一塊兒學習吧 研究基於 Vue版本 【2.5.17】

若是你以爲排版難看，請點擊 下面連接 或者 拉到 下面關注公衆號也能夠吧

【Vue原理】Diff - 白話版

終於到了最後一塊內容了！今天咱們就來簡單歸納一下 Diff，內容一點都很少哦，全是圖片

Diff 做爲 Vue 比較重要的一部份內容，仍是很是有必要深刻了解的

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

一、Diff 的做用

二、Diff 的作法

三、Diff 的比較邏輯

四、簡單的例子
複製代碼

下面就開始咱們的正文

---

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 的比較邏輯

一、能不移動，儘可能不移動

二、沒得辦法，只好移動

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

比較處理流程是下面這樣

在新舊節點中

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

二、再找相同可是須要移動的節點，消耗第二小

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

比較是爲了修改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

而後頁面就完成更新啦

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

後面的就會出源碼版啦

最後

鑑於本人能力有限，不免會有疏漏錯誤的地方，請你們多多包涵，若是有任何描述不當的地方，歡迎後臺聯繫本人，有重謝