Vue中簡單的虛擬DOM是什么樣
1. 一個簡單的虛擬DOM長什么樣
其實(shí)當(dāng)今前端框架不少用到了虛擬DOM的技術(shù)，但各家有各家的實(shí)現(xiàn)。這里我們先看下比較簡單的虛擬DOM庫snabbdom的虛擬DOM長什么樣
我們假設(shè)有html如下，其實(shí)也就是所謂的真實(shí)DOM
<div class="message">Hello World</div>
那么snabbdom對應(yīng)的虛擬DOM是長以下這個樣子的：
{
"sel": "div",
"data": {
"class": "message"
},
"text": "Hello World"
}
這樣看來一個虛擬DOM其實(shí)就是一個json文件，里面的內(nèi)容也不難理解，猜都能猜出來：
- sel: 標(biāo)簽名
- data: 標(biāo)簽屬性
- text: 標(biāo)簽之間的文本內(nèi)容
從這里就不難理解虛擬DOM和真實(shí)DOM的關(guān)系，虛擬DOM就是一個用來描述真實(shí)DOM節(jié)點(diǎn)的Javascript對象。
虛擬DOM除了可以描述單一的一個真實(shí)DOM節(jié)點(diǎn)，還能描述一顆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ù)組選項(xiàng)，里面的內(nèi)容就是前面html中的子節(jié)點(diǎn)。
2. Vue中的虛擬DOM長什么樣
還是以最簡單的html節(jié)點(diǎn)為例子
<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é)點(diǎn)來表示，而不是像snabbdom那樣直接放到自身的text中
3. Vue中的虛擬DOM實(shí)現(xiàn)
在Vue中，虛擬DOM是通過VNode這個類來實(shí)現(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)的選項(xiàng)，還有很多Vue實(shí)現(xiàn)需要用到的選項(xiàng)，這里就不一一解析，什么時(shí)候用到什么時(shí)候分析吧，先有個概念就好了。
4. createTextVNode
從VNode的構(gòu)造函數(shù)可以看到其接受的參數(shù)比較多，為了方便使用，vue為創(chuàng)建VNode節(jié)點(diǎn)提供了一些函數(shù)的封裝，其中我們最常用的就是創(chuàng)建一個文本節(jié)點(diǎn)。
export function createTextVNode(val: string | number) {
return new VNode(undefined, undefined, undefined, String(val));
}
對應(yīng)的真實(shí)DOM
<div>Hello world</div>
到此這篇關(guān)于Vue中簡單的虛擬DOM是什么樣的文章就介紹到這了,更多相關(guān)Vue虛擬DOM內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Vue響應(yīng)式原理與虛擬DOM實(shí)現(xiàn)步驟詳細(xì)講解
- React之虛擬DOM的實(shí)現(xiàn)原理
- Vue虛擬dom被創(chuàng)建的方法
- Vue源碼分析之虛擬DOM詳解
- vue 虛擬DOM快速入門
- react中的虛擬dom和diff算法詳解
- vue 虛擬DOM的原理
- 詳解操作虛擬dom模擬react視圖渲染
- 淺談React的最大亮點(diǎn)之虛擬DOM
- React?JSX深入淺出理解
- React jsx轉(zhuǎn)換與createElement使用超詳細(xì)講解
- React詳細(xì)講解JSX和組件的使用
- React基礎(chǔ)-JSX的本質(zhì)-虛擬DOM的創(chuàng)建過程實(shí)例分析
相關(guān)文章
詳解利用 Vue.js 實(shí)現(xiàn)前后端分離的RBAC角色權(quán)限管理
本篇文章主要介紹了利用 Vue.js 實(shí)現(xiàn)前后端分離的RBAC角色權(quán)限管理，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了web項(xiàng)目開發(fā)中VUE的混入與繼承原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2021-09-09
這篇文章主要介紹了vue?退出登錄?清除localStorage的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue Router根據(jù)后臺數(shù)據(jù)加載不同的組件實(shí)現(xiàn)
本文主要介紹了根據(jù)用戶所購買服務(wù)的不同，有不同的頁面展現(xiàn)。文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了一篇文章帶你徹底搞懂VUE響應(yīng)式原理，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可任意參考一下,需要的朋友可以參考下2022-06-06
Vue前端如何實(shí)現(xiàn)與后端進(jìn)行數(shù)據(jù)交互
這篇文章主要介紹了Vue前端如何實(shí)現(xiàn)與后端進(jìn)行數(shù)據(jù)交互，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue中element 的upload組件發(fā)送請求給后端操作
這篇文章主要介紹了vue中element 的upload組件發(fā)送請求給后端操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
element中async-validator異步請求驗(yàn)證使用
本文主要介紹了element中async-validator異步請求驗(yàn)證使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了Vue.js如何使用Socket.IO的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
本篇文章主要介紹了使用vue制作FullPage頁面滾動效果，詳細(xì)的介紹了FullPage頁面的思路和實(shí)現(xiàn)，有興趣的可以了解一下2017-08-08