快速搞懂Vue2 diff算法（圖文詳解）

diff算法是一種通過同層的樹節(jié)點(diǎn)進(jìn)行比較的高效算法，避免了對樹進(jìn)行逐層搜索遍歷。那么大家對diff算法嗎有多少了解？下面本篇文章就來帶大家深入解析下vue2的diff算法，希望對大家有所幫助！

看 Vue 2 的源代碼已經(jīng)很久了，從用 flow 到如今使用 TypeScript，我每次都會打開它的源代碼看一看，但是每次都只看到了 數(shù)據(jù)初始化 部分，也就是 beforeMount 的階段，對于如何生成 VNode（Visual Dom Node， 也可以直接稱為 vdom） 以及組件更新時如何比較 VNode（diff）始終沒有仔細(xì)研究，只知道采用了 雙端 diff 算法，至于這個雙端是怎么開始怎么結(jié)束的也一直沒有去看過，所以這次趁寫文章的機(jī)會仔細(xì)研究一下。如果內(nèi)容有誤，希望大家能幫我指出，非常感謝~

什么是 diff ?

在我的理解中，diff 指代的是 differences，即 新舊內(nèi)容之間的區(qū)別計(jì)算；Vue 中的 diff 算法，則是通過一種 簡單且高效 的手段快速對比出 新舊 VNode 節(jié)點(diǎn)數(shù)組之間的區(qū)別 以便 以最少的 dom 操作來更新頁面內(nèi)容。【