頻繁且複雜的dom操作通常是前端效能瓶頸的產生點，vue提供了虛擬dom的解決辦法
所謂虛擬dom,其實就是用js來模擬dom結構，把dom的變化操作放在js層來做，儘量減少對dom的操作.
虛擬的dom的核心思想是：對複雜的文件dom結構，提供一種方便的工具，進行最小化地dom操作。這句話，也許過於抽象，卻基本概況了虛擬dom的設計思想
(1) 提供一種方便的工具，使得開發效率得到保證
(2) 保證最小化的dom操作，使得執行效率得到保證
也就是說，虛擬dom的框架/工具都是這麼做的：
**內部當資料變化，生成一顆新的虛擬dom樹，與上一次的虛擬dom樹結構進行對比。也就是說，當資料變化的時候，
大量操作的是虛擬dom,而虛擬dom屬於記憶體資料，操作起來效能要高的多。而真實的dom操作，只有在追加的那一刻
會進行操作，大大提公升了效能**
虛擬dom其實是裡面記憶體型物件（js記憶體物件） 屬於記憶體資料 真實dom的一層對映，操作節點的次數越少，瀏覽器所用的時間就會越短，如下列**：
//執行10000次** 0.3ms
let myp = document.
getelementbyid
("myp"
) let num =
1 console.
time
("temp"
)for
(var i=
0;i<
10000
;i++
) myp.innerhtml = num
console.
timeend
("temp"
)//執行10000次** 35ms
let myp = document.
getelementbyid
("myp"
) console.
time
("temp"
)for
(var i=
0;i<
10000
;i++
) console.
timeend
("temp"
)
虛擬dom中，在dom的狀態發生變化時，虛擬dom會進行diff運算，來更新只需要被替換的dom，而不是全部重繪。
在diff演算法中，只平層的比較前後兩棵dom樹的節點，沒有進行深度的遍歷。
1.如果節點型別改變，直接將舊節點解除安裝，替換為新節點，舊節點包括下面的子節點都將被解除安裝，如果新節點和舊節點僅僅是型別不同，但下面的所有子節點都一樣時，這樣做也是效率不高的乙個地方。
2.節點型別不變，屬性或者屬性值改變，不會解除安裝節點，執行節點更新的操作。
3.文字改變，直接修改文字內容。
4.移動，增加，刪除子節點時：
如果想在中間插入節點f，簡單粗暴的做法是：解除安裝c，裝載f，解除安裝d，裝載c，解除安裝e，裝載d，裝載e。簡單的來說，插入乙個新的節點時，原先節點的位置會發生改變如下圖：
寫**時，如果沒有給陣列或列舉型別定義乙個key，就會採用上面的粗暴演算法。
如果為元素增加key後，vue就能根據key，直接找到具體的位置進行操作，效率比較高。簡單的來說 這時候新增加的節點不會改變原先dom上的節點位置所對應的內容如下圖：
本尋著key值相同的即可復用的原則。
對於vue虛擬dom的理解
虛擬dom就是為了解決瀏覽器效能問題而被設計出來的。例如，若一次操作中有10次更新dom的動作，虛擬dom不會立即操作dom，而是將這10次更新的diff內容儲存到本地乙個js物件中，最終將這個js物件一次性attch到dom樹上，再進行後續操作，避免大量無謂的計算量。簡單來說，可以把virtual...
虛擬dom的具體理解
下面來說下，我理解的虛擬dom 背景 我們知道在jquery時代，都是直接操作dom的，你需要在適當的時機以正確的順序來制定要更改的元素，相當於我們自己要時時刻刻看著dom，然後告訴它你頭要怎麼放，手要擺怎麼樣的姿勢。所以問題來了，你為什麼不一次性告訴dom你想要的結果呢？而且另外乙個常識問題就是操...
對虛擬DOM的理解
什麼是虛擬dom 簡單來說虛擬dom就是用js來模擬dom結構。相對於瀏覽器渲染出來的真是dom。1.記憶體中生成一顆虛擬dom樹 var vdom children 上面就是乙個簡單的虛擬dom，可以將記憶體裡的虛擬dom渲染成真實dom 虛擬dom的作用 當用傳統的api或jquery去操作do...