一、什么是虛擬DOM

• 虛擬DOM是對真是DOM的抽象，以JavaScript對象（VNode節(jié)點(diǎn)）作為基礎(chǔ)的樹，用對象的屬性來描述節(jié)點(diǎn)，最終可以通過一系列操作使這棵樹映射到真實(shí)環(huán)境上。
• Javascript對象中，虛擬DOM表現(xiàn)為一個Object對象，并且最少包含標(biāo)簽名（tag）、屬性（attrs）和子元素對象（children）三個屬性。
• 創(chuàng)建虛擬DOM就是為了更好將虛擬的節(jié)點(diǎn)渲染到頁面視圖中，所以虛擬DOM對象的節(jié)點(diǎn)與真實(shí)DOM的屬性一一照應(yīng)。
• 真實(shí)DOM

<div id="app">
    <p class="p">節(jié)點(diǎn)內(nèi)容</p>
    <h3>{{ foo }}</h3>
</div>

• 實(shí)例化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("節(jié)點(diǎn)內(nèi)容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})

• 通過VNode，vue可以對這棵抽象樹進(jìn)行創(chuàng)建節(jié)點(diǎn)、刪除節(jié)點(diǎn)以及修改節(jié)點(diǎn)的操作，經(jīng)過diff算法得出一些需要修改的最小單位，再更新視圖，減少了dom操作，提高了性能。

二、為什么需要虛擬DOM

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

三、虛擬DOM介紹

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

到此這篇關(guān)于Vue虛擬DOM詳細(xì)介紹的文章就介紹到這了,更多相關(guān)Vue虛擬DOM內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！