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