vue 虛擬dom 和 diff 演算法

虛擬dom其實就是乙個js物件，就是用物件的方式取代真實的dom操作，把真實的dom操作放在記憶體當中，在記憶體中的物件裡做模擬操作。當頁面開啟時瀏覽器會解析html元素，構建一顆dom樹，將狀態全部儲存起來，在記憶體當中模擬我們真實的dom操作，操作完後又會生成一顆dom樹，兩顆dom樹進行比較，根據diff演算法比較兩顆dom樹不同的地方，只渲染一次不同的地方。

舉個栗子：

就是下圖所示的這個，詳細的闡述了模板 → 渲染函式 → 虛擬dom樹 → 真實dom的乙個過程

虛擬dom的最終目標是將虛擬節點渲染到檢視上。但是如果直接使用虛擬節點覆蓋舊節點的話，會有很多不必要的dom操作。例如，乙個ul標籤下很多個li標籤，其中只有乙個li有變化，這種情況下如果使用新的ul去替代舊的ul,因為這些不必要的dom操作而造成了效能上的浪費。

為了避免不必要的dom操作，虛擬dom在虛擬節點對映到檢視的過程中，將虛擬節點與上一次渲染檢視所使用的舊虛擬節點（oldvnode）做對比，找出真正需要更新的節點來進行dom操作，從而避免操作其他無需改動的dom。

其實虛擬dom在vue.js主要做了兩件事：

diff演算法是一種優化手段，將前後兩個模組進行差異的對比，(修補)更新差異的過程叫做patch(打補丁)

diff 演算法包括幾個步驟：

簡化版：

①用js物件構造乙個虛擬的dom樹，插入到文件中；

②狀態變更時，記錄新樹和舊樹的差異；

③把上面的差異構建到真正的dom中。

Vue虛擬Dom和diff演算法

到底什麼是虛擬dom呢?誕生的原因舉個栗子 就是下圖所示的這個，詳細的闡述了模板 渲染函式 虛擬dom樹 真實dom的乙個過程 虛擬dom的最終目標是將虛擬節點渲染到檢視上。但是如果直接使用虛擬節點覆蓋舊節點的話，會有很多不必要的dom操作。例如，乙個ul標籤下很多個li標籤，其中只有乙個li有變化...

虛擬DOM和Diff演算法

虛擬dom其實就是在真實dom之前加了一層js物件生成的dom 用js物件模擬dom 把這個虛擬dom物件轉為真實的dom插入到頁面中 如果有事件修改了虛擬dom，比較兩個虛擬dom樹的差異，得到差異物件 補丁 把差異物件應用到正則的dom樹上 比較同級的節點 同一父節點的子節點 當發現節點已經不存...

虛擬DOM和diff演算法

虛擬dom virtual dom 也就是我們常說的虛擬節點，它是通過js的object物件模擬dom中的節點，然後再通過特定的render方法將其渲染成真實的dom的節點。為什麼要使用虛擬dom呢，因為操作真實dom的耗費的效能代價太高，頻繁的操作dom，會大量的造成頁面的重繪和回流，出於效能優化...