Vue中簡(jiǎn)單的虛擬DOM是什么樣
1. 一個(gè)簡(jiǎn)單的虛擬DOM長(zhǎng)什么樣
其實(shí)當(dāng)今前端框架不少用到了虛擬DOM的技術(shù)，但各家有各家的實(shí)現(xiàn)。這里我們先看下比較簡(jiǎn)單的虛擬DOM庫snabbdom的虛擬DOM長(zhǎng)什么樣
我們假設(shè)有html如下，其實(shí)也就是所謂的真實(shí)DOM
<div class="message">Hello World</div>
那么snabbdom對(duì)應(yīng)的虛擬DOM是長(zhǎng)以下這個(gè)樣子的：
{
"sel": "div",
"data": {
"class": "message"
},
"text": "Hello World"
}
這樣看來一個(gè)虛擬DOM其實(shí)就是一個(gè)json文件，里面的內(nèi)容也不難理解，猜都能猜出來：
- sel: 標(biāo)簽名
- data: 標(biāo)簽屬性
- text: 標(biāo)簽之間的文本內(nèi)容
從這里就不難理解虛擬DOM和真實(shí)DOM的關(guān)系，虛擬DOM就是一個(gè)用來描述真實(shí)DOM節(jié)點(diǎn)的Javascript對(duì)象。
虛擬DOM除了可以描述單一的一個(gè)真實(shí)DOM節(jié)點(diǎn)，還能描述一顆DOM數(shù)。
比如有html如下:
<div id="container"> <div class="message">Hello World</div> </div>
對(duì)應(yīng)的虛擬DOM將會(huì)是
{
"sel": "div",
"data": {
"id": "container"
},
"children": [
{
"sel": "div",
"data": {
"class": "message"
},
"text": "Hello World"
}
]
}
虛擬DOM對(duì)象里面多了個(gè)children的數(shù)組選項(xiàng)，里面的內(nèi)容就是前面html中的子節(jié)點(diǎn)。
2. Vue中的虛擬DOM長(zhǎng)什么樣
還是以最簡(jiǎn)單的html節(jié)點(diǎn)為例子
<div class="message">Hello World</div>
vue中的虛擬DOM將會(huì)是如下這個(gè)樣子的
{
tag: "div",
data: {
"staticClass": "message"
}
children: [
{
text: "Hello World",
...
},
],
...
}
Vue中的虛擬DOM比snabbdom的虛擬DOM復(fù)雜，會(huì)多出很多屬性，我這里就不一一列出來了，上面只是顯示了一些我覺得和snabbdom的虛擬DOM差不多的屬性。
兩個(gè)虛擬DOM看上去差不多，只是：
- 標(biāo)簽名這里用tag而非sel
- 標(biāo)簽之間的文本在vue中用一個(gè)文本虛擬子節(jié)點(diǎn)來表示，而不是像snabbdom那樣直接放到自身的text中
3. Vue中的虛擬DOM實(shí)現(xiàn)
在Vue中，虛擬DOM是通過VNode這個(gè)類來實(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等描述一個(gè)DOM結(jié)構(gòu)的選項(xiàng)，還有很多Vue實(shí)現(xiàn)需要用到的選項(xiàng)，這里就不一一解析，什么時(shí)候用到什么時(shí)候分析吧，先有個(gè)概念就好了。
4. createTextVNode
從VNode的構(gòu)造函數(shù)可以看到其接受的參數(shù)比較多，為了方便使用，vue為創(chuàng)建VNode節(jié)點(diǎn)提供了一些函數(shù)的封裝，其中我們最常用的就是創(chuàng)建一個(gè)文本節(jié)點(diǎn)。
export function createTextVNode(val: string | number) {
return new VNode(undefined, undefined, undefined, String(val));
}
對(duì)應(yīng)的真實(shí)DOM
<div>Hello world</div>
到此這篇關(guān)于Vue中簡(jiǎn)單的虛擬DOM是什么樣的文章就介紹到這了,更多相關(guān)Vue虛擬DOM內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(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)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁加載效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
vue.js在標(biāo)簽屬性中插入變量參數(shù)的方法
這篇文章主要介紹了vue.js在標(biāo)簽屬性中插入變量參數(shù)的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-03-03
vue路由對(duì)不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)
這篇文章主要介紹了vue路由對(duì)不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue項(xiàng)目如何部署到SpringBoot工程下
這篇文章主要介紹了Vue項(xiàng)目如何部署到SpringBoot工程下問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue項(xiàng)目總結(jié)之webpack常規(guī)打包優(yōu)化方案
這篇文章主要介紹了vue項(xiàng)目總結(jié)之webpack常規(guī)打包優(yōu)化方案,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
在vue3項(xiàng)目中實(shí)現(xiàn)國際化的代碼示例
國際化就是指在一個(gè)項(xiàng)目中，項(xiàng)目中的語言可以進(jìn)行切換（中英文切換），那么在實(shí)際項(xiàng)目中是如何實(shí)現(xiàn)的呢，本文就給大家詳細(xì)的介紹實(shí)現(xiàn)方法,需要的朋友可以參考下2023-07-07
Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過1M壓縮上傳
這篇文章主要為大家詳細(xì)介紹了Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過1M壓縮上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了vue獲取光標(biāo)位置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
本篇文章主要介紹了詳解Vue 方法與事件處理器 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能
這篇文章主要介紹了Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能，倒計(jì)時(shí)的運(yùn)用場(chǎng)景是獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)、獲取郵箱驗(yàn)證碼倒計(jì)時(shí)等場(chǎng)景，本文結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-01-01