Vue虛擬DOM是什么

這篇文章主要講解了“Vue虛擬DOM是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue虛擬DOM是什么”吧！

一、什么是虛擬DOM

• 虛擬DOM是對真是DOM的抽象，以JavaScript對象（VNode節點）作為基礎的樹，用對象的屬性來描述節點，最終可以通過一系列操作使這棵樹映射到真實環境上。

• Javascript對象中，虛擬DOM表現為一個Object對象，并且最少包含標簽名（tag）、屬性（attrs）和子元素對象（children）三個屬性。

• 創建虛擬DOM就是為了更好將虛擬的節點渲染到頁面視圖中，所以虛擬DOM對象的節點與真實DOM的屬性一一照應。

• 真實DOM

<div id="app">
    <p class="p">節點內容</p>
    <h4>{{ foo }}</h4>
</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('h4',[_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是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！