什么是vnode
- vnode tree是對真實dom tree的一層抽象。
- 每個vnode節(jié)點對應(yīng)真實dom的屬性，它是一個Object對象难咕，它用對象的屬性來描述vnode節(jié)點峰弹。
- 每個vnode節(jié)點下的children依舊是vnode節(jié)點，與真實dom tree一一對應(yīng)大年。
為什么需要vnode
- 真實dom包含了太多的屬性换薄，頻繁的操作dom導(dǎo)致頁面的重繪和回流，導(dǎo)致頁面卡頓鲜戒。
- 頻繁的dom操作導(dǎo)致瀏覽器的解析引擎和渲染引擎頻繁通信专控，消耗性能。
- 真實dom更新10次遏餐，會導(dǎo)致瀏覽器重新渲染10次伦腐，而虛擬dom是異步更新，只會渲染一次失都，提高頁面渲染性能柏蘑。
- 提供跨平臺的能力幸冻，React-Native和weex
實現(xiàn)vnode
- vue通過createElement生成vnode，通過diff算法只渲染不同的部分到視圖中咳焚。
- vue把template模板編譯為render渲染函數(shù)洽损，執(zhí)行渲染函數(shù)后就生成vnode節(jié)點樹。
- 通過diff算法后革半，訂閱者watcher就會調(diào)用patch給真實的DOM打補丁碑定。
掛載（mount）
- 一個運行時渲染器將會遍歷整個虛擬 DOM 樹，并據(jù)此構(gòu)建真實的 DOM 樹的過程又官。
更新（patch 或者 diffing）
- 如果我們有兩份虛擬 DOM 樹延刘，渲染器將會有比較地遍歷它們，找出它們之間的區(qū)別六敬，并應(yīng)用這其中的變化到真實的 DOM 上的過程
vue中虛擬dom渲染過程
image.png
