Vue中簡單的虛擬DOM是什么樣
更新時間：2022年10月27日 17:11:09 作者：天地會珠海分舵
這些年寫前端vue時經(jīng)常碰到虛擬DOM這個單詞，但都是聽到就算了，左耳進(jìn)右耳出，知道有這么個東西就完了，因為感覺也沒有影響我實現(xiàn)公司的產(chǎn)品業(yè)務(wù)邏輯。今天在這里想花點時間探討下虛擬DOM相關(guān)的知識，給自己補補課
1. 一個簡單的虛擬DOM長什么樣
其實當(dāng)今前端框架不少用到了虛擬DOM的技術(shù)，但各家有各家的實現(xiàn)。這里我們先看下比較簡單的虛擬DOM庫snabbdom的虛擬DOM長什么樣
我們假設(shè)有html如下，其實也就是所謂的真實DOM
<div class="message">Hello World</div>
那么snabbdom對應(yīng)的虛擬DOM是長以下這個樣子的：
{
"sel": "div",
"data": {
"class": "message"
},
"text": "Hello World"
}
這樣看來一個虛擬DOM其實就是一個json文件，里面的內(nèi)容也不難理解，猜都能猜出來：
- sel: 標(biāo)簽名
- data: 標(biāo)簽屬性
- text: 標(biāo)簽之間的文本內(nèi)容
從這里就不難理解虛擬DOM和真實DOM的關(guān)系，虛擬DOM就是一個用來描述真實DOM節(jié)點的Javascript對象。
虛擬DOM除了可以描述單一的一個真實DOM節(jié)點，還能描述一顆DOM數(shù)。
比如有html如下:
<div id="container"> <div class="message">Hello World</div> </div>
對應(yīng)的虛擬DOM將會是
{
"sel": "div",
"data": {
"id": "container"
},
"children": [
{
"sel": "div",
"data": {
"class": "message"
},
"text": "Hello World"
}
]
}
虛擬DOM對象里面多了個children的數(shù)組選項，里面的內(nèi)容就是前面html中的子節(jié)點。
2. Vue中的虛擬DOM長什么樣
還是以最簡單的html節(jié)點為例子
<div class="message">Hello World</div>
vue中的虛擬DOM將會是如下這個樣子的
{
tag: "div",
data: {
"staticClass": "message"
}
children: [
{
text: "Hello World",
...
},
],
...
}
Vue中的虛擬DOM比snabbdom的虛擬DOM復(fù)雜，會多出很多屬性，我這里就不一一列出來了，上面只是顯示了一些我覺得和snabbdom的虛擬DOM差不多的屬性。
兩個虛擬DOM看上去差不多，只是：
- 標(biāo)簽名這里用tag而非sel
- 標(biāo)簽之間的文本在vue中用一個文本虛擬子節(jié)點來表示，而不是像snabbdom那樣直接放到自身的text中
3. Vue中的虛擬DOM實現(xiàn)
在Vue中，虛擬DOM是通過VNode這個類來實現(xiàn)的。
export default class VNode {
tag: string | void;
data: VNodeData | void;
children: ?Array<VNode>;
text: string | void;
elm: Node | void;
ns: string | void;
context: Component | void; // rendered in this component's scope
key: string | number | void;
componentOptions: VNodeComponentOptions | void;
componentInstance: Component | void; // component instance
parent: VNode | void; // component placeholder node
// strictly internal
raw: boolean; // contains raw HTML? (server only)
isStatic: boolean; // hoisted static node
isRootInsert: boolean; // necessary for enter transition check
isComment: boolean; // empty comment placeholder?
isCloned: boolean; // is a cloned node?
isOnce: boolean; // is a v-once node?
asyncFactory: Function | void; // async component factory function
asyncMeta: Object | void;
isAsyncPlaceholder: boolean;
ssrContext: Object | void;
fnContext: Component | void; // real context vm for functional nodes
fnOptions: ?ComponentOptions; // for SSR caching
devtoolsMeta: ?Object; // used to store functional render context for devtools
fnScopeId: ?string; // functional scope id support
constructor(
tag?: string,
data?: VNodeData,
children?: ?Array<VNode>,
text?: string,
elm?: Node,
context?: Component,
componentOptions?: VNodeComponentOptions,
asyncFactory?: Function
) {
this.tag = tag;
this.data = data;
this.children = children;
this.text = text;
this.elm = elm;
this.ns = undefined;
this.context = context;
this.fnContext = undefined;
this.fnOptions = undefined;
this.fnScopeId = undefined;
this.key = data && data.key;
this.componentOptions = componentOptions;
this.componentInstance = undefined;
this.parent = undefined;
this.raw = false;
this.isStatic = false;
this.isRootInsert = true;
this.isComment = false;
this.isCloned = false;
this.isOnce = false;
this.asyncFactory = asyncFactory;
this.asyncMeta = undefined;
this.isAsyncPlaceholder = false;
}
}其中包含了我們上面示例看到的最重要的tag，data，children等描述一個DOM結(jié)構(gòu)的選項，還有很多Vue實現(xiàn)需要用到的選項，這里就不一一解析，什么時候用到什么時候分析吧，先有個概念就好了。
4. createTextVNode
從VNode的構(gòu)造函數(shù)可以看到其接受的參數(shù)比較多，為了方便使用，vue為創(chuàng)建VNode節(jié)點提供了一些函數(shù)的封裝，其中我們最常用的就是創(chuàng)建一個文本節(jié)點。
export function createTextVNode(val: string | number) {
return new VNode(undefined, undefined, undefined, String(val));
}
對應(yīng)的真實DOM
<div>Hello world</div>
到此這篇關(guān)于Vue中簡單的虛擬DOM是什么樣的文章就介紹到這了,更多相關(guān)Vue虛擬DOM內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Vue響應(yīng)式原理與虛擬DOM實現(xiàn)步驟詳細(xì)講解
- React之虛擬DOM的實現(xiàn)原理
- Vue虛擬dom被創(chuàng)建的方法
- Vue源碼分析之虛擬DOM詳解
- vue 虛擬DOM快速入門
- react中的虛擬dom和diff算法詳解
- vue 虛擬DOM的原理
- 詳解操作虛擬dom模擬react視圖渲染
- 淺談React的最大亮點之虛擬DOM
- React?JSX深入淺出理解
- React jsx轉(zhuǎn)換與createElement使用超詳細(xì)講解
- React詳細(xì)講解JSX和組件的使用
- React基礎(chǔ)-JSX的本質(zhì)-虛擬DOM的創(chuàng)建過程實例分析
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)分頁加載效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
vue.js在標(biāo)簽屬性中插入變量參數(shù)的方法
這篇文章主要介紹了vue.js在標(biāo)簽屬性中插入變量參數(shù)的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-03-03
vue路由對不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)
這篇文章主要介紹了vue路由對不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Vue項目如何部署到SpringBoot工程下問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue項目總結(jié)之webpack常規(guī)打包優(yōu)化方案
這篇文章主要介紹了vue項目總結(jié)之webpack常規(guī)打包優(yōu)化方案,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
國際化就是指在一個項目中，項目中的語言可以進(jìn)行切換（中英文切換），那么在實際項目中是如何實現(xiàn)的呢，本文就給大家詳細(xì)的介紹實現(xiàn)方法,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue移動端實現(xiàn)圖片上傳及超過1M壓縮上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了vue獲取光標(biāo)位置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
本篇文章主要介紹了詳解Vue 方法與事件處理器 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了Vue3?實現(xiàn)驗證碼倒計時功能，倒計時的運用場景是獲取手機(jī)驗證碼倒計時、獲取郵箱驗證碼倒計時等場景，本文結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-01-01