vue核心之虛拟DOM(vdom)

vdom是什麼

• virtual dom ， 虛拟 DOM
• 用 js 模拟DOM結構

為什麼需要虛拟DOM，它有什麼好處?

虛拟DOM就是為了解決浏覽器性能問題而被設計出來的。若一次操作中有10次更新DOM的動作，虛拟DOM不會立即操作DOM，而是将這10次更新的diff内容儲存到本地一個JS對象中，最終将這個JS對象一次性attch到DOM樹上，再進行後續操作，避免大量無謂的計算量。是以，用JS對象模拟DOM節點的好處是，頁面的更新可以先全部反映在JS對象(虛拟DOM)上，操作記憶體中的JS對象的速度顯然要更快，等更新完成後，再将最終的JS對象映射成真實的DOM，交由浏覽器去繪制。

• DOM操作非常昂貴
• DOM變化的對比，放在 js 層來做，提高效率
• 提高重繪性能

虛拟DOM的實作

真實DOM

用JS來模拟DOM節點實作虛拟DOM。

用js對象模拟DOM節點的好處是，頁面的更新可以先全部反映在js對象上，操作記憶體中的js對象的速度顯然要快多了。等更新完後，再将最終的js對象映射成真實的DOM，交由浏覽器去繪制。

Element方法的具體實作

第一個參數是節點名（如div），第二個參數是節點的屬性（如class），第三個參數是子節點（如ul的li）。除了這三個參數會被儲存在對象上外，還儲存了key和count。其相當于形成了虛拟DOM樹。

有了JS對象後，最終還需要将其映射成真實DOM

根據DOM名調用源生的createElement建立真實DOM，将DOM的屬性全都加到這個DOM元素上，如果有子元素繼續遞歸調用建立子元素，并appendChild挂到該DOM元素上。這樣就完成了從建立虛拟DOM到将其映射成真實DOM的全部工作。

使用Diff算法

virtual DOM和真實DOM的差別

<div>
  <p>Hello World</p>
</div>
// 轉換成虛拟節點 類似于下面這種
const Vnode = {
  tag:'div',
  children:[
    {tag:'p',text:'Hello World'}
  ]
}