Vue中的虛擬DOM

眾所周知，在網頁中最大的開銷就是dom操作，dom很慢而且非常龐大。原生 js 或 jq 操作dom時，瀏覽器會從構建dom樹開始從頭到尾執行一遍流程。在一次操作中，我需要更新10個節點，瀏覽器不知道共有10個節點要更新，就會執行10次更新操作，浪費效能，使頁面出現卡頓，影響使用者體驗。

於是，就出現了虛擬dom

將記憶體中的虛擬dom樹初始化渲染成真實dom樹

當我們修改資料的時候，將之前的虛擬dom樹結合資料生成新的虛擬dom樹

將生成的虛擬dom與上一次的虛擬dom樹結構進行對比，對比差異（diff演算法）

將對比出來的差異部分重新真實dom結構渲染

優點：

當資料變化的時候，大量操作的是虛擬dom，屬於記憶體資料，操作起來效能要高很多，而真實的dom操作，只有在追加的那一刻才會進行操作，大大提公升了效能

兩顆完全的樹差異比較乙個時間複雜度為 o(n^3)。但是在我們的web中很少用到跨層級dom樹的比較，所以平層(乙個層級跟乙個層級對比)，這樣演算法複雜度就可以達到 o(n)。如下圖

平層diff，只有以下4種情況：

如果是節點型別改變，直接將舊節點解除安裝替換為新節點，舊節點包括下面的子節點全部解除安裝

節點型別不變，屬性或屬性值改變，不會解除安裝節點，執行節點更新的操作

文字改變，直接修改文字內容

移動、增加、刪除子節點時

如果想在中間插入節點f，簡單粗暴的做法是：解除安裝c，裝載f，解除安裝d，裝載c，解除安裝e，裝載d，裝載e。如下圖：

如果沒有給陣列或列舉型別定義乙個key，就會採用以上粗暴的演算法

如果為元素增加key後，vue就能根據key，直接找到具體的位置進行操作，效率比較高。如下圖：

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-t3bu0yhz-1584981903776)(image-20200324004229970.png)]

在v-for中提供key，一方面提高效能，一方面避免出錯

vue虛擬DOM是什麼？vue的虛擬DOM的用法

vue虛擬dom是什麼？vue的虛擬dom的用法 1 為什麼需要虛擬dom 雖然採用的是文件碎片，但是操作的還是真實的dom。而我們知道操作dom的代價是昂貴的，所以vue2.0採用了虛擬dom來代替對真實dom的操作，最後通過某種機制來完成對真實dom的更新，渲染檢視。所謂的虛擬dom，其實就是用...

vue虛擬dom詳解

從 vue1.x 設計理念說起 對vue發展史比較熟悉的同學，應該知道這件事 vue1.0 並沒有虛擬dom這玩意，而是是 採用資料繫結 依賴收集的方式去觀察資料變化並保留對實際 dom 元素的引用 當有資料變化時進行對應的操作，每乙個觀測的render watcher 對應的就是乙個真實的dom節...

對於vue虛擬dom的理解

虛擬dom就是為了解決瀏覽器效能問題而被設計出來的。例如，若一次操作中有10次更新dom的動作，虛擬dom不會立即操作dom，而是將這10次更新的diff內容儲存到本地乙個js物件中，最終將這個js物件一次性attch到dom樹上，再進行後續操作，避免大量無謂的計算量。簡單來說，可以把virtual...