Vue.js之VNode的使用

什麼是VNode

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

例如,DOM元素有元素節點,文本節點,註釋節點等,vnode實例也會對應著有元素節點和文本節點和註釋節點。

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隻是一個名字,本質上來說就是一個普通的JavaScript對象,是從VNode類實例化的對象。我們用這個JavaScript對象來描述一個真實DOM元素的話,那麼該DOM元素上的所有屬性在VNode這個對象上都存在對應得屬性。

簡單來說,vnode可以理解成節點描述對象,他描述瞭應該怎樣去創建真實的DOM節點。
例如,tag表示一個元素節點的名稱,text表示一個文本節點的文本,children表示子節點等。vnode表示一個真實的DOM元素,所有真實的DOM節點都是用vnode創建並插入到頁面中。

VNode創建DOM並插入到視圖

圖中展示瞭使用vnode創建真實的DOM並渲染到視圖的過程。可以得知,vnode和視圖是一一對應的。我們可以把vnode理解成JavaScript對象版本的DOM元素。

渲染視圖的過程是先創建vnode,然後在使用vnode去生成真實的DOM元素,最後插入到頁面渲染視圖。

VNode的作用

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

Vue.js目前對狀態的偵測策略采用瞭中等粒度。當狀態發生變化時,隻通知到組件級別,然後組件內使用虛擬DOM來渲染視圖。

如圖下所示,當某個狀態發生變化時,隻通知使用瞭這個狀態的組件。也就是說,隻要組件使用的眾多狀態中有一個發生瞭變化,那麼整個組件就要重新渲染。

如果組件隻有一個節點發生瞭變化,那麼重新渲染整個組件的所有節點,很明顯會造成很大的性能浪費。因此,對vnode驚醒緩存,並將上一次的緩存和當前創建的vnode對比,隻更新有差異的節點就變得很重要。這也是vnode最重要的一個作用。

VNode的類型

vnode有很多不同的類型,有以下幾種:

註釋節點

  1. 文本節點
  2. 元素節點
  3. 組件節點
  4. 函數式節點
  5. 克隆節點

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

1.註釋節點

由於創建註釋節點的過程非常簡單,所以直接通過代碼來介紹它有哪些屬性:

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

一個註釋節點隻有兩個有效屬性 text 和 isComment。其餘屬性全是默認undefined或者false。

例如一個真實的註釋節點,所對應的vnode是下面的樣子:

// <!-- 註釋節點 -->
{
    text: "註釋節點",
    isComment: true
}

2.文本節點

文本節點的創建過程也非常簡單,代碼如下:

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

當文本類型的vnode被創建時,它隻有一個text屬性:

{
    text: "文本節點"
}
 

3.克隆節點

克隆節點是將現有節點的屬性賦值到新節點中,讓新創建的節點和被克隆的節點的屬性保持一致,從而實現克隆效果。它的作用是優化靜態節點和插槽節點(slot node)。

以靜態節點為例,當組件內某個狀態發生變化後,當前組件會通過虛擬DOM重新渲染視圖,靜態節點因為它的內容不會改變,所以除瞭首次渲染需要執行渲染函數獲取vnode之外,後續更新不需要執行渲染函數重新生成vnode。

因此,這是就會使用創建克隆節點的方法將vnode克隆一份,使用克隆節點進行渲染。這樣就不需要執行渲染函數生成新的靜態節點的vnode,從而提升一定的性能。

創建克隆節點的代碼如下:

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
    }

克隆現有節點,隻需要將現有節點的屬性全部賦值到新節點中。
克隆節點和被克隆節點位移的區別是isCloned屬性,克隆節點為true,被克隆的原始節點為false。

4.元素節點

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

  • tag:tag就是一個節點的名稱,例如 p、ul、li和div等。
  • data:改屬性包含瞭一些節點上的數據,比如attrs、class和style等。
  • children:當前節點的子節點列表。
  • context:它是當前組件的Vue.js實例

一個真實的元素節點,對應得vnode是下面這樣:

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

5.組件節點

組件節點和元素節點類似,有以下兩個獨有的屬性。

componentOptions:組件節點的選項參數,其中包含瞭propsData、tag和children等信息
componentInstance:組件的實例,也就是Vue.js的實例。事實上,在Vue.js中,每個組件都有一個Vue.js實例。

一個組件節點,對應得vnode是下面這樣:

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

6.函數式節點

函數式節點和組件節點類似,他有兩個獨有的屬性functionalContext和functionalOptions。
通常,一個函數式節點的vnode是下面這樣:

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

總結

VNode是一個類,可以生產不同類型的vnode實例,不同類型的實例表示不同類型的真實DOM。

由於Vue.js對組件采用瞭虛擬DOM來更新視圖,當屬性發生變化時,整個組件都要進行重新渲染的操作,但組件內並不是所有的DOM節點都需要更新,所以將vnode緩存並將當前新生成的vnode和緩存的vnode作對比,隻對需要更新的部分進行DOM操作可以提升很多的性能。

vnode有很多類型,它們本質上都是Vnode實例化出的對象,其唯一區別是屬性不同。

到此這篇關於Vue.js之VNode的使用的文章就介紹到這瞭,更多相關VNode使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!