Vue虛擬DOM詳細介紹

Posted on by

一、什麼是虛擬DOM

  • 虛擬DOM是對真是DOM的抽象，以JavaScript對象（VNode節點）作為基礎的樹，用對象的屬性來描述節點，最終可以通過一系列操作使這棵樹映射到真實環境上。
  • Javascript對象中，虛擬DOM表現為一個Object對象，並且最少包含標簽名（tag）、屬性（attrs）和子元素對象（children）三個屬性。
  • 創建虛擬DOM就是為瞭更好將虛擬的節點渲染到頁面視圖中，所以虛擬DOM對象的節點與真實DOM的屬性一一照應。
  • 真實DOM
<div id="app">
    <p class="p">節點內容</p>
    <h3>{{ foo }}</h3>
</div>
  • 實例化vue
const app = new Vue({
    el:"#app",
    data:{
        foo:"foo"
    }
})
  • 觀察render的render，我們能得到虛擬DOM
(function anonymous(
) {
	with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},
					  [_v("節點內容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})
  • 通過VNode，vue可以對這棵抽象樹進行創建節點、刪除節點以及修改節點的操作，經過diff算法得出一些需要修改的最小單位，再更新視圖，減少瞭dom操作，提高瞭性能。

二、為什麼需要虛擬DOM

  • DOM其實是很慢的，哪怕一個最簡單的div也包含著很多的屬性。
  • 因此操作DOM的代價仍舊是昂貴的，頻繁操作還是會出現頁面卡頓，影響用戶的體驗。
  • 用傳統的原生api或jQuery操作DOM時，瀏覽器會從構建DOM樹開始從頭到尾執行一遍流程。
  • 如：當要更新10個DOM節點時，瀏覽器收到第一個更新DOM請求後，並不知道後續還有9次更新操作，會馬上執行流程，最終執行10次流程。通過VNode，同樣更新10個DOM節點，虛擬DOM不會立即操作DOM，而是將這10次更新的diff內容保存到本地的一個js對象中，最終將這個js對象一次性attach到DOM樹上，避免大量的無謂計算。
  • 虛擬DOM最大的優勢在於抽象瞭原本的渲染過程，實現瞭跨平臺的能力，不僅僅局限於瀏覽器的DOM，還可以是其他組件。

三、虛擬DOM介紹

回答：虛擬DOM是對真實DOM的一種抽象，會根據DOM標簽的名字、屬性、孩子對真實DOM進行映射。使用虛擬DOM的原因是，真實DOM其實是很慢的，一個簡單的標簽也包含瞭許多屬性。同時真實DOM進行更新時的過程很笨拙，虛擬DOM使用diff算法，可以很輕便的進行DOM的操作。

到此這篇關於Vue虛擬DOM詳細介紹的文章就介紹到這瞭,更多相關Vue虛擬DOM內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：