快捷導(dǎo)航

Vue虛擬DOM詳細(xì)介紹

更新時(shí)間：2022年08月04日 15:30:16 作者：飯啊飯°

虛擬DOM的概念是通過狀態(tài)生成一個(gè)虛擬節(jié)點(diǎn)樹，然后使用虛擬節(jié)點(diǎn)樹進(jìn)行渲染。在渲染之前，會(huì)使用新生成的虛擬節(jié)點(diǎn)和上一次生成的虛擬節(jié)點(diǎn)進(jìn)行對(duì)比，只渲染不同的部分

一、什么是虛擬DOM

虛擬DOM是對(duì)真是DOM的抽象，以JavaScript對(duì)象（VNode節(jié)點(diǎn)）作為基礎(chǔ)的樹，用對(duì)象的屬性來描述節(jié)點(diǎn)，最終可以通過一系列操作使這棵樹映射到真實(shí)環(huán)境上。
Javascript對(duì)象中，虛擬DOM表現(xiàn)為一個(gè)Object對(duì)象，并且最少包含標(biāo)簽名（tag）、屬性（attrs）和子元素對(duì)象（children）三個(gè)屬性。
創(chuàng)建虛擬DOM就是為了更好將虛擬的節(jié)點(diǎn)渲染到頁面視圖中，所以虛擬DOM對(duì)象的節(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可以對(duì)這棵抽象樹進(jìn)行創(chuàng)建節(jié)點(diǎn)、刪除節(jié)點(diǎn)以及修改節(jié)點(diǎn)的操作，經(jīng)過diff算法得出一些需要修改的最小單位，再更新視圖，減少了dom操作，提高了性能。

二、為什么需要虛擬DOM

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

三、虛擬DOM介紹

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

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

您可能感興趣的文章: