Vue虛擬DOM詳細介紹
更新時間：2022年08月04日 15:30:16 作者：飯啊飯°
虛擬DOM的概念是通過狀態(tài)生成一個虛擬節(jié)點樹，然后使用虛擬節(jié)點樹進行渲染。在渲染之前，會使用新生成的虛擬節(jié)點和上一次生成的虛擬節(jié)點進行對比，只渲染不同的部分
一、什么是虛擬DOM
- 虛擬DOM是對真是DOM的抽象，以JavaScript對象（VNode節(jié)點）作為基礎的樹，用對象的屬性來描述節(jié)點，最終可以通過一系列操作使這棵樹映射到真實環(huán)境上。
- Javascript對象中，虛擬DOM表現(xiàn)為一個Object對象，并且最少包含標簽名（tag）、屬性（attrs）和子元素對象（children）三個屬性。
- 創(chuàng)建虛擬DOM就是為了更好將虛擬的節(jié)點渲染到頁面視圖中，所以虛擬DOM對象的節(jié)點與真實DOM的屬性一一照應。
- 真實DOM
<div id="app">
<p class="p">節(jié)點內容</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("節(jié)點內容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})
- 通過VNode，vue可以對這棵抽象樹進行創(chuàng)建節(jié)點、刪除節(jié)點以及修改節(jié)點的操作，經過diff算法得出一些需要修改的最小單位，再更新視圖，減少了dom操作，提高了性能。
二、為什么需要虛擬DOM
- DOM其實是很慢的，哪怕一個最簡單的div也包含著很多的屬性。
- 因此操作DOM的代價仍舊是昂貴的，頻繁操作還是會出現(xiàn)頁面卡頓，影響用戶的體驗。
- 用傳統(tǒng)的原生api或jQuery操作DOM時，瀏覽器會從構建DOM樹開始從頭到尾執(zhí)行一遍流程。
- 如：當要更新10個DOM節(jié)點時，瀏覽器收到第一個更新DOM請求后，并不知道后續(xù)還有9次更新操作，會馬上執(zhí)行流程，最終執(zhí)行10次流程。通過VNode，同樣更新10個DOM節(jié)點，虛擬DOM不會立即操作DOM，而是將這10次更新的diff內容保存到本地的一個js對象中，最終將這個js對象一次性attach到DOM樹上，避免大量的無謂計算。
- 虛擬DOM最大的優(yōu)勢在于抽象了原本的渲染過程，實現(xiàn)了跨平臺的能力，不僅僅局限于瀏覽器的DOM，還可以是其他組件。
三、虛擬DOM介紹
回答：虛擬DOM是對真實DOM的一種抽象，會根據DOM標簽的名字、屬性、孩子對真實DOM進行映射。使用虛擬DOM的原因是，真實DOM其實是很慢的，一個簡單的標簽也包含了許多屬性。同時真實DOM進行更新時的過程很笨拙，虛擬DOM使用diff算法，可以很輕便的進行DOM的操作。
到此這篇關于Vue虛擬DOM詳細介紹的文章就介紹到這了,更多相關Vue虛擬DOM內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue-cli腳手架build目錄下utils.js工具配置文件詳解
這篇文章主要介紹了vue-cli腳手架build目錄下utils.js工具配置文件詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue使用vue-json-viewer展示JSON數(shù)據的詳細步驟
最近在開發(fā)一個公司的投放管理系統(tǒng)的操作日志模塊,要查看某條操作日志的請求參數(shù),要將請求的參數(shù)以JSON格式的形式展示出來,下面這篇文章主要給大家介紹了vue使用vue-json-viewer展示JSON數(shù)據的相關資料,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)鼠標懸浮框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家介紹了Vue 3.0的attribute強制行為理解學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
使用provide/inject實現(xiàn)跨組件通信的方法
在 Vue 應用中,組件間通信是構建復雜應用時的一個常見需求,Vue3.x 提供了provide和inject API,讓跨組件通信變得更加簡潔和高效,本文將深入探討如何使用provide和inject在Vue3.x中實現(xiàn)跨組件通信,并通過示例代碼一步步進行說明,需要的朋友可以參考下2024-03-03
在 Vue.js 中，父子組件通信是非常重要的，在本文中，我們討論了 Vue.js 中父子組件通信的幾種方式，包括使用 props 傳遞數(shù)據、使用 Sync 修飾符實現(xiàn)雙向綁定、使用自定義事件傳遞數(shù)據、使用 $refs 訪問子組件實例以及使用 $children 和 $parent 訪問父子組件實例2023-09-09
這篇文章主要介紹了Vue的mixin策略的相關資料，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2020-11-11
Vue中如何實現(xiàn)在線預覽word文件、excel文件
這篇文章主要介紹了Vue中如何實現(xiàn)在線預覽word文件、excel文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue入門之數(shù)量加減運算操作,結合實例形式分析了vue.js基本數(shù)值運算相關操作技巧,需要的朋友可以參考下2018-12-12
vue提供了mixin、extends配置項,最近使用中發(fā)現(xiàn)很好用,下面這篇文章主要給大家介紹了關于Vue中Mixin&extends的詳細使用方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-02-02