Vue中的diff算法
概念：diff算法是一種優(yōu)化手段，將前后兩個(gè)模塊進(jìn)行差異化對(duì)比，修補(bǔ)（更新）差異的過(guò)程叫做patch(打補(bǔ)丁)
為什么vue,react這些框架中都會(huì)有diff算法呢，我們都知道真實(shí)dom的開(kāi)銷(xiāo)是很大的，這個(gè)跟性能優(yōu)化中的重繪意義類(lèi)似。某些時(shí)候我們修改了頁(yè)面中的某個(gè)數(shù)據(jù)，如果直接渲染到真實(shí)DOM中會(huì)引起整棵樹(shù)的重繪，那么我們能不能只讓我們改變過(guò)的數(shù)據(jù)映射到真實(shí) DOM,做一個(gè)最少的重繪呢，這就是diff算法要解決的事情。
virtual DOM和真實(shí)DOM的區(qū)別
virtual DOM是將真實(shí)的 DOM 的數(shù)據(jù)抽取出來(lái)，以對(duì)象的形式模擬樹(shù)形結(jié)構(gòu)，diff算法比較的也是virtual DOM
代碼理解
<div>
<p>Hello World</p>
</div>
// 轉(zhuǎn)換成虛擬節(jié)點(diǎn) 類(lèi)似于下面這種
const Vnode = {
tag:'div',
children:[
{tag:'p',text:'Hello World'}
]
}
diff是如何比較的?
概括起來(lái)就是對(duì)操作前后的dom樹(shù)同一層的節(jié)點(diǎn)進(jìn)行對(duì)比，一層一層對(duì)比，然后再插入真實(shí)的dom中，重新渲染
vue中列表循環(huán)需加:key="唯一標(biāo)識(shí)" 唯一標(biāo)識(shí)可以是item里面id index等，因?yàn)関ue組件高度復(fù)用增加Key可以標(biāo)識(shí)組件的唯一性，那么 key是如何更高效的更新虛擬DOM的呢
我們看下面的例子
我們希望可以在B和C之間加一個(gè)F,diff算法默認(rèn)執(zhí)行起來(lái)是這樣的：即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很沒(méi)有效率？
所以我們需要使用key來(lái)給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)，Diff算法就可以正確的識(shí)別此節(jié)點(diǎn)，找到正確的位置區(qū)插入新的節(jié)點(diǎn)。
