什么是VNode

在vue.js中存在一個VNode類，使用它可以實例化不同類型的vnode實例，而不同類型的vnode實例各自表示不同類型的DOM元素。

例如，DOM元素有元素節(jié)點，文本節(jié)點，注釋節(jié)點等，vnode實例也會對應(yīng)著有元素節(jié)點和文本節(jié)點和注釋節(jié)點。

VNode類代碼如下：

export default class VNode { constructor(tag, data, children, text, elm, context, componentOptions, asyncFactory) { this.tag = tagthis.data = datathis.children = childrenthis.text = textthis.elm = elmthis.ns = undefinedthis.context = contextthis.functionalContext = undefinedthis.functionalOptions = undefinedthis.functionalScopeId = undefinedthis.key = data && data.keythis.componentOptions = componentOptionsthis.componentInstance = undefinedthis.parent = undefinedthis.raw = falsethis.isStatic = falsethis.isRootInsert = truethis.isComment = falsethis.isCloned = falsethis.isOnce = falsethis.asyncFactory = asyncFactorythis.asyncMeta = undefinedthis.isAsyncPlaceholder = false } get child() {return this.componentInstance } }

從上面的代碼可以看出，vnode只是一個名字，本質(zhì)上來說就是一個普通的JavaScript對象，是從VNode類實例化的對象。我們用這個JavaScript對象來描述一個真實DOM元素的話，那么該DOM元素上的所有屬性在VNode這個對象上都存在對應(yīng)得屬性。

簡單來說，vnode可以理解成節(jié)點描述對象，他描述了應(yīng)該怎樣去創(chuàng)建真實的DOM節(jié)點。例如，tag表示一個元素節(jié)點的名稱，text表示一個文本節(jié)點的文本，children表示子節(jié)點等。vnode表示一個真實的DOM元素，所有真實的DOM節(jié)點都是用vnode創(chuàng)建并插入到頁面中。

VNode創(chuàng)建DOM并插入到視圖

圖中展示了使用vnode創(chuàng)建真實的DOM并渲染到視圖的過程?？梢缘弥瑅node和視圖是一一對應(yīng)的。我們可以把vnode理解成JavaScript對象版本的DOM元素。

渲染視圖的過程是先創(chuàng)建vnode，然后在使用vnode去生成真實的DOM元素，最后插入到頁面渲染視圖。

VNode的作用

由于每次渲染視圖時都是先創(chuàng)建vnode，然后使用它創(chuàng)建的真實DOM插入到頁面中，所以可以將上一次渲染視圖時先所創(chuàng)建的vnode先緩存起來，之后每當需要重新渲染視圖時，將新創(chuàng)建的vnode和上一次緩存的vnode對比，查看他們之間有哪些不一樣的地方，找出不一樣的地方并基于此去修改真實的DOM。

Vue.js目前對狀態(tài)的偵測策略采用了中等粒度。當狀態(tài)發(fā)生變化時，只通知到組件級別，然后組件內(nèi)使用虛擬DOM來渲染視圖。

如圖下所示，當某個狀態(tài)發(fā)生變化時，只通知使用了這個狀態(tài)的組件。也就是說，只要組件使用的眾多狀態(tài)中有一個發(fā)生了變化，那么整個組件就要重新渲染。

如果組件只有一個節(jié)點發(fā)生了變化，那么重新渲染整個組件的所有節(jié)點，很明顯會造成很大的性能浪費。因此，對vnode驚醒緩存，并將上一次的緩存和當前創(chuàng)建的vnode對比，只更新有差異的節(jié)點就變得很重要。這也是vnode最重要的一個作用。

VNode的類型

vnode有很多不同的類型，有以下幾種：

注釋節(jié)點

文本節(jié)點 元素節(jié)點 組件節(jié)點 函數(shù)式節(jié)點 克隆節(jié)點

前面介紹了vnode是一個JavaScript對象，不同類型的vnode之間其實屬性不同，準確說是有效屬性不同。因為當使用VNode類創(chuàng)建一個vnode時，通過參數(shù)為實例設(shè)置屬性時，無效的屬性會默認設(shè)置為undefined或者false。對于 vnode身上的無效屬性，直接忽略就好。

1.注釋節(jié)點

由于創(chuàng)建注釋節(jié)點的過程非常簡單，所以直接通過代碼來介紹它有哪些屬性：

export const createEmptyVNode = text => {const node = new VNode()node.text = text;node.isComment = true;return node }

一個注釋節(jié)點只有兩個有效屬性 text 和 isComment。其余屬性全是默認undefined或者false。

例如一個真實的注釋節(jié)點，所對應(yīng)的vnode是下面的樣子：

// <!-- 注釋節(jié)點 -->{ text: '注釋節(jié)點', isComment: true}2.文本節(jié)點

文本節(jié)點的創(chuàng)建過程也非常簡單，代碼如下：

export function createTextVNode(val) {return new VNode(undefined, undefined, undefined, String(val)) }

當文本類型的vnode被創(chuàng)建時，它只有一個text屬性：

{ text: '文本節(jié)點'} 3.克隆節(jié)點

克隆節(jié)點是將現(xiàn)有節(jié)點的屬性賦值到新節(jié)點中，讓新創(chuàng)建的節(jié)點和被克隆的節(jié)點的屬性保持一致，從而實現(xiàn)克隆效果。它的作用是優(yōu)化靜態(tài)節(jié)點和插槽節(jié)點（slot node）。

以靜態(tài)節(jié)點為例，當組件內(nèi)某個狀態(tài)發(fā)生變化后，當前組件會通過虛擬DOM重新渲染視圖，靜態(tài)節(jié)點因為它的內(nèi)容不會改變，所以除了首次渲染需要執(zhí)行渲染函數(shù)獲取vnode之外，后續(xù)更新不需要執(zhí)行渲染函數(shù)重新生成vnode。

因此，這是就會使用創(chuàng)建克隆節(jié)點的方法將vnode克隆一份，使用克隆節(jié)點進行渲染。這樣就不需要執(zhí)行渲染函數(shù)生成新的靜態(tài)節(jié)點的vnode，從而提升一定的性能。

創(chuàng)建克隆節(jié)點的代碼如下：

export function cloneVNode(vnode, deep) {const cloned = new VNode(vnode.tag, vnode.data, vnode.children, vnode.text, vnode.elm, vnode.context, vnode.componentOptions, vnode.asyncFactory)cloned.ns = vnode.nscloned.isStatic = vnode.isStaticcloned.key = vnode.keycloned.isComment = vnode.isCommentcloned.isCloned = trueif (deep && vnode.children) { cloned.children = cloneVNodes(vnode.children)}return cloned }

克隆現(xiàn)有節(jié)點，只需要將現(xiàn)有節(jié)點的屬性全部賦值到新節(jié)點中?？寺」?jié)點和被克隆節(jié)點位移的區(qū)別是isCloned屬性，克隆節(jié)點為true，被克隆的原始節(jié)點為false。

4.元素節(jié)點

元素節(jié)點通常會存在以下4中有效屬性。

tag：tag就是一個節(jié)點的名稱，例如 p、ul、li和div等。 data：改屬性包含了一些節(jié)點上的數(shù)據(jù)，比如attrs、class和style等。 children：當前節(jié)點的子節(jié)點列表。 context：它是當前組件的Vue.js實例

一個真實的元素節(jié)點，對應(yīng)得vnode是下面這樣：

// <p><span>Hello</span><span>World</span></p> {children: [VNode, VNode],context: {...},data: {...},tag: 'p',... } 5.組件節(jié)點

組件節(jié)點和元素節(jié)點類似，有以下兩個獨有的屬性。

componentOptions：組件節(jié)點的選項參數(shù)，其中包含了propsData、tag和children等信息componentInstance：組件的實例，也就是Vue.js的實例。事實上，在Vue.js中，每個組件都有一個Vue.js實例。

一個組件節(jié)點，對應(yīng)得vnode是下面這樣：

// <child></child> {componentInstance: {...},componentOptions: {...},context: {...},data: {...},tag: 'vue-component-1-child',...}6.函數(shù)式節(jié)點

函數(shù)式節(jié)點和組件節(jié)點類似，他有兩個獨有的屬性functionalContext和functionalOptions。通常，一個函數(shù)式節(jié)點的vnode是下面這樣：

{functionalContext: {...},functionalOptions: {...},context: {...},data: {...},tag: 'div' }總結(jié)

VNode是一個類，可以生產(chǎn)不同類型的vnode實例，不同類型的實例表示不同類型的真實DOM。

由于Vue.js對組件采用了虛擬DOM來更新視圖，當屬性發(fā)生變化時，整個組件都要進行重新渲染的操作，但組件內(nèi)并不是所有的DOM節(jié)點都需要更新，所以將vnode緩存并將當前新生成的vnode和緩存的vnode作對比，只對需要更新的部分進行DOM操作可以提升很多的性能。

vnode有很多類型，它們本質(zhì)上都是Vnode實例化出的對象，其唯一區(qū)別是屬性不同。

到此這篇關(guān)于Vue.js之VNode的使用的文章就介紹到這了,更多相關(guān)VNode使用內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！