什么是虛擬DOM
虛擬DOM其實(shí)是時(shí)代發(fā)展的產(chǎn)物呵晚。在web早期印荔，網(wǎng)頁通常沒有現(xiàn)在這么多交互及動(dòng)畫效果，所以沒有很多復(fù)雜的狀態(tài)需要管理嘱腥，使用jquery操作DOM即可滿足開發(fā)需求录别。隨著時(shí)代的發(fā)展朽色，頁面功能越多，需求也越來越復(fù)雜组题，程序維護(hù)的狀態(tài)也越來越多葫男，所以需要的DOM的操作也就變得頻繁起來，而直接操作DOM的代價(jià)又是相當(dāng)高的（性能浪費(fèi)）崔列，所以虛擬DOM的技術(shù)就應(yīng)運(yùn)而生了梢褐。
虛擬DOM的解決方式是通過頁面狀態(tài)生成一個(gè)虛擬節(jié)點(diǎn)樹，然后使用虛擬節(jié)點(diǎn)樹進(jìn)行渲染峻呕。在渲染之前利职，會(huì)使用新生成的虛擬節(jié)點(diǎn)樹和上一次生成的虛擬節(jié)點(diǎn)樹進(jìn)行對(duì)比，然后只渲染不同的部分瘦癌。
虛擬節(jié)點(diǎn)樹其實(shí)是由組件樹建立起來的整個(gè)虛擬節(jié)點(diǎn)（Virtual Node猪贪，簡稱VNode）
vue中的虛擬DOM
在vue中，使用模板來描述狀態(tài)和DOM之間的映射關(guān)系讯私。vue通過編譯將模板轉(zhuǎn)為渲染函數(shù)（render）热押，執(zhí)行渲染函數(shù)就可以得到一個(gè)虛擬節(jié)點(diǎn)樹西傀，使用這個(gè)虛擬節(jié)點(diǎn)樹就可以渲染頁面。
虛擬DOM的最終目標(biāo)是虛擬節(jié)點(diǎn)渲染到視圖上桶癣，但是如果直接用虛擬DOM覆蓋舊節(jié)點(diǎn)的話拥褂，會(huì)有很多不必要的DOM操作。例如牙寞，一個(gè)ul標(biāo)簽下其中只有一個(gè)li標(biāo)簽有變化饺鹃，這種情況如果使用新的ul去替換舊的ul，其實(shí)除了那個(gè)發(fā)生變化的li節(jié)點(diǎn)外间雀，其他都不需要重新渲染悔详。所以虛擬DOM在虛擬節(jié)點(diǎn)映射到視圖的過程中，將虛擬節(jié)點(diǎn)與上一次渲染視圖所有使用的舊虛擬節(jié)點(diǎn)做對(duì)比惹挟，找出真正需要更新的節(jié)點(diǎn)后才進(jìn)行DOM操作茄螃。
從上可以看出，vue中的虛擬DOM主要做了兩件事：
- 提供與真實(shí)DOM節(jié)點(diǎn)所對(duì)應(yīng)的虛擬節(jié)點(diǎn)vnode
- 將虛擬節(jié)點(diǎn)vnode和舊虛擬節(jié)點(diǎn)進(jìn)行對(duì)比连锯，然后更新視圖归苍。
vnode是JavaScript中一個(gè)很普通的對(duì)象，這個(gè)對(duì)象屬性上保存了生成DOM節(jié)點(diǎn)所需要的一些數(shù)據(jù)运怖，這個(gè)將在下一篇文章解釋拼弃。
