什么是VNode

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

例如，DOM元素有元素節(jié)點(diǎn)，文本節(jié)點(diǎn)，注釋節(jié)點(diǎn)等，vnode實(shí)例也會(huì)對(duì)應(yīng)著有元素節(jié)點(diǎn)和文本節(jié)點(diǎn)和注釋節(jié)點(diǎn)。

VNode類代碼如下：

 export default class VNode {
    constructor(tag, data, children, text, elm, context, componentOptions, asyncFactory) {
       this.tag = tag
        this.data = data
        this.children = children
        this.text = text
        this.elm = elm
        this.ns = undefined
        this.context = context
        this.functionalContext = undefined
        this.functionalOptions = undefined
        this.functionalScopeId = 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
    }
    get child() {
        return this.componentInstance
    }
 }
 

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

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

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

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

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

VNode的作用

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

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

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

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

VNode的類型

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

注釋節(jié)點(diǎn)

1. 文本節(jié)點(diǎn)
2. 元素節(jié)點(diǎn)
3. 組件節(jié)點(diǎn)
4. 函數(shù)式節(jié)點(diǎn)
5. 克隆節(jié)點(diǎn)

前面介紹了vnode是一個(gè)JavaScript對(duì)象，不同類型的vnode之間其實(shí)屬性不同，準(zhǔn)確說(shuō)是有效屬性不同。因?yàn)楫?dāng)使用VNode類創(chuàng)建一個(gè)vnode時(shí)，通過(guò)參數(shù)為實(shí)例設(shè)置屬性時(shí)，無(wú)效的屬性會(huì)默認(rèn)設(shè)置為undefined或者false。對(duì)于 vnode身上的無(wú)效屬性，直接忽略就好。

1.注釋節(jié)點(diǎn)

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

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

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

例如一個(gè)真實(shí)的注釋節(jié)點(diǎn)，所對(duì)應(yīng)的vnode是下面的樣子：

// <!-- 注釋節(jié)點(diǎn) -->
{
    text: "注釋節(jié)點(diǎn)",
    isComment: true
}

2.文本節(jié)點(diǎn)

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

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

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

{
    text: "文本節(jié)點(diǎn)"
}
 

3.克隆節(jié)點(diǎn)

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

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

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

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

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.ns
        cloned.isStatic = vnode.isStatic
        cloned.key = vnode.key
        cloned.isComment = vnode.isComment
        cloned.isCloned = true
        if (deep && vnode.children) {
            cloned.children = cloneVNodes(vnode.children)
        }
        return cloned
    }

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

4.元素節(jié)點(diǎn)

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

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

一個(gè)真實(shí)的元素節(jié)點(diǎn)，對(duì)應(yīng)得vnode是下面這樣：

    // <p><span>Hello</span><span>World</span></p>
    {
        children: [VNode, VNode],
        context: {...},
        data: {...},
        tag: "p",
        ...
    }
 

5.組件節(jié)點(diǎn)

組件節(jié)點(diǎn)和元素節(jié)點(diǎn)類似，有以下兩個(gè)獨(dú)有的屬性。

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

一個(gè)組件節(jié)點(diǎn)，對(duì)應(yīng)得vnode是下面這樣：

    // <child></child>
    {
        componentInstance: {...},
        componentOptions: {...},
        context: {...},
        data: {...},
        tag: "vue-component-1-child",
        ...    
    }

6.函數(shù)式節(jié)點(diǎn)

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

     {
        functionalContext: {...},
        functionalOptions: {...},
        context: {...},
        data: {...},
        tag: "div"
      }

總結(jié)

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

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

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

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

最新評(píng)論