diff算法是一種通過同層的樹節(jié)點(diǎn)進(jìn)行比較的高效算法,避免了對(duì)樹進(jìn)行逐層搜索遍歷。那么大家對(duì)diff算法嗎有多少了解?下面本篇文章就來帶大家深入解析下vue2的diff算法,希望對(duì)大家有所幫助!
看 Vue 2 的源代碼已經(jīng)很久了,從用 flow 到如今使用 TypeScript,我每次都會(huì)打開它的源代碼看一看,但是每次都只看到了 數(shù)據(jù)初始化 部分,也就是 beforeMount
的階段,對(duì)于如何生成 VNode(Visual Dom Node, 也可以直接稱為 vdom) 以及組件更新時(shí)如何比較 VNode(diff)始終沒有仔細(xì)研究,只知道采用了 雙端 diff 算法,至于這個(gè)雙端是怎么開始怎么結(jié)束的也一直沒有去看過,所以這次趁寫文章的機(jī)會(huì)仔細(xì)研究一下。如果內(nèi)容有誤,希望大家能幫我指出,非常感謝~
什么是 diff ?
在我的理解中,diff 指代的是 differences
,即 新舊內(nèi)容之間的區(qū)別計(jì)算;Vue 中的 diff 算法,則是通過一種 簡(jiǎn)單且高效 的手段快速對(duì)比出 新舊 VNode 節(jié)點(diǎn)數(shù)組之間的區(qū)別 以便 以最少的 dom 操作來更新頁面內(nèi)容?!?/p>