虛擬dom就是為了解決瀏覽器效能問題而被設計出來的。例如，若一次操作中有10次更新dom的動作，虛擬dom不會立即操作dom，而是將這10次更新的diff內容儲存到本地乙個js物件中，最終將這個js物件一次性attch到dom樹上，再進行後續操作，避免大量無謂的計算量。簡單來說，可以把virtual dom 理解為乙個簡單的js物件，並且最少包含標籤名( tag)、屬性(attrs)和子元素物件( children)三個屬性。
在記憶體中生成一顆虛擬dom樹
將記憶體中的虛擬dom樹初始化渲染成真實dom樹
當我們修改data裡面的資料時候
將之前的虛擬dom樹結合新的資料生成一顆新的虛擬dom樹
將此次生成好的新的虛擬dom樹與上一次虛擬dom樹結構進行對比，對比差異（diff演算法）
將對比出來的差異部分進行重新真實dom結構的渲染
初次渲染的時候，將vdom渲染成真正的dom然後插入到容器裡面。
再次渲染的時候，將新的vnode和舊的vnode相對比，然後之間差異應用到所構建的真正的dom樹上。
在實際**中，會對新舊兩棵樹進行乙個深度的遍歷，每個節點都會有乙個標記。每遍歷到乙個節點就把該節點和新的樹進行對比，如果有差異就記錄到乙個物件中。
渲染的一些不同改變：
1.如果節點型別改變，直接將舊節點解除安裝，替換為新節點，舊節點包括下面的子節點都將被解除安裝，如果新節點和舊節點僅僅是型別不同，但下面的所有子節點都一樣時，這樣做也是效率不高的乙個地方。
2.節點型別不變，屬性或者屬性值改變，不會解除安裝節點，執行節點更新的操作。
3.文字改變，直接修改文字內容。
4.移動，增加，刪除子節點時。
如果想在中間插入節點f，簡單粗暴的做法是：解除安裝c，裝載f，解除安裝d，裝載c，解除安裝e，裝載d，裝載e。如下圖：
如果為元素增加key後，vue就能根據key，直接找到具體的位置進行操作，效率比較高。如下圖：
在v-for中提供key，一方面可以提高效能，一方面也會避免出錯。
對於虛擬dom的初步理解
頻繁且複雜的dom操作通常是前端效能瓶頸的產生點，vue提供了虛擬dom的解決辦法 所謂虛擬dom,其實就是用js來模擬dom結構，把dom的變化操作放在js層來做，儘量減少對dom的操作.虛擬的dom的核心思想是 對複雜的文件dom結構，提供一種方便的工具，進行最小化地dom操作。這句話，也許過於...
對vue虛擬dom的理解
1為什麼使用虛擬dom 因為在開發中，操作原生dom是非常消耗效能的，如果某個節點發生改變時，整個容器中的內容都要被重新渲染。而虛擬dom可以很好地解決這個問題。如果一次操作中有10次更新dom的操作，虛擬dom不會立即操作dom，而是將這10次更新的diff內容儲存在本地的乙個js物件中，最終將這...
vue虛擬DOM是什麼？vue的虛擬DOM的用法
vue虛擬dom是什麼？vue的虛擬dom的用法 1 為什麼需要虛擬dom 雖然採用的是文件碎片，但是操作的還是真實的dom。而我們知道操作dom的代價是昂貴的，所以vue2.0採用了虛擬dom來代替對真實dom的操作，最後通過某種機制來完成對真實dom的更新，渲染檢視。所謂的虛擬dom，其實就是用...