什麼是虛擬dom
簡單來說虛擬dom就是用js來模擬dom結構。相對於瀏覽器渲染出來的真是dom。
//1.記憶體中生成一顆虛擬dom樹
var vdom =
, children:[,
}]}
虛擬dom的作用
當用傳統的api或jquery去操作dom時，瀏覽器會從構建dom樹開始從頭到尾執行一遍流程。比如當你在一次操作時，需要更新10個dom節點，理想狀態是一次性構建完成dom樹，再執行後續操作。但是瀏覽器沒有那麼智慧型，在收到第乙個更新dom請求後，並不知道後續還有9次更新操作，因此會馬上執行流程，最終執行10次流程，顯然前面幾次都是白白浪費效能。而且操作dom的代價是很昂貴的，頻繁操作可能會出現頁面卡頓，影響使用者的體驗。
虛擬dom就是為了解決這個瀏覽器效能問題而被設計出來的，如果一次操作中有10次更新dom的操作，虛擬dom不會立即操作dom，而是將這10次更新的diff內容儲存在本地的乙個js物件中，最終將這個js物件一次性attach到dom樹上，通知瀏覽器去執行繪製工作，這樣可以避免大量的無謂的計算量。
兩個假設
當dom改變的時候，他會使用diff演算法將改變以後的js物件樹與原先的js物件樹進行比較，這個比較是逐層比較的，當發現節點刪除就刪除，增加就增加，
但是由於他是一級一級進行比較的，這樣就會有乙個致命的缺點：假設在根元素上又巢狀了乙個元素，那麼diff演算法在比較第一層的時候就認為改變了，就相當於重新建立了乙個js物件樹，這樣效率還是不高，
此外，還有乙個致命的缺點就是;如果同一級上有特別多個相同的元素，在增加或者排序的時候，就會在迴圈比較的時候浪費掉大量的效能
於是，為了解決這兩個缺點，虛擬dom做了兩個假設，並且這兩個假設也實現了，所以已經解決了這兩個缺點
兩個假設：
1、兩個相同的元件產生類似的dom結構，不同的dom節點產生不同的dom節點
2、對於同乙個層次的一組節點，他們可以通過唯一的id進行區分
對於第二種假設，就是解釋了我們為什麼要在vue的v-for裡面必須加乙個key 並且這個key要是唯一的
對vue虛擬dom的理解
1為什麼使用虛擬dom 因為在開發中，操作原生dom是非常消耗效能的，如果某個節點發生改變時，整個容器中的內容都要被重新渲染。而虛擬dom可以很好地解決這個問題。如果一次操作中有10次更新dom的操作，虛擬dom不會立即操作dom，而是將這10次更新的diff內容儲存在本地的乙個js物件中，最終將這...
簡談對虛擬Dom的理解
簡單說一下我自己對虛擬dom的理解。由於 jquery es6模板字串 渲染dom 真實的渲染 效能巨差 所以 為了提高效能虛擬dom就是把真實的dom轉成js 物件樹 虛擬dom建立以後 也就是componentwillmounted完成的時候 就建立了這個源樹 根據元件內部的state 父元件的...
虛擬dom的具體理解
下面來說下，我理解的虛擬dom 背景 我們知道在jquery時代，都是直接操作dom的，你需要在適當的時機以正確的順序來制定要更改的元素，相當於我們自己要時時刻刻看著dom，然後告訴它你頭要怎麼放，手要擺怎麼樣的姿勢。所以問題來了，你為什麼不一次性告訴dom你想要的結果呢？而且另外乙個常識問題就是操...