VNode說(shuō)明&作用

VNode是什么

VNode是JavaScript對(duì)象。VNode表示Virtual DOM，用JavaScript對(duì)象來(lái)描述真實(shí)的DOM把DOM標(biāo)簽，屬性，內(nèi)容都變成對(duì)象的屬性。就像使用JavaScript對(duì)象對(duì)一種動(dòng)物進(jìn)行說(shuō)明一樣{name: 'Hello Kitty', age: 1, children: null}。

VNode的作用

通過(guò)render將template模版描述成VNode，然后進(jìn)行一系列操作之后形成真實(shí)的DOM進(jìn)行掛載。

VNode的優(yōu)點(diǎn)

1. 兼容性強(qiáng)，不受執(zhí)行環(huán)境的影響。VNode因?yàn)槭?code>JS對(duì)象，不管Node還是瀏覽器，都可以統(tǒng)一操作，從而獲得了服務(wù)端渲染、原生渲染、手寫(xiě)渲染函數(shù)等能力。
2. 減少操作DOM，任何頁(yè)面的變化，都只使用VNode進(jìn)行操作對(duì)比，只需要在最后一步掛載更新DOM，不需要頻繁操作DOM，從而提高頁(yè)面性能。

VNode如何生成

在Vue源碼中，VNode是通過(guò)一個(gè)構(gòu)造函數(shù)生成的。

export default class VNode {
  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
  }
}

VNode構(gòu)造函數(shù)看起來(lái)十分簡(jiǎn)單，先走一遍VNode的生成過(guò)程。

// 模版
<a href="#" rel="external nofollow" >
    generator VNode
</a>
// VNode描述
{
  tag: 'a',
  data: {
    calss: 'demo',
    attrs: {
      href: '#'
    },
    style: {
      color: 'red'
    }
  },
  children: ['generator VNode']
}

這個(gè)JS對(duì)象，已經(jīng)囊括了整個(gè)模板的所有信息，完全可以根據(jù)這個(gè)對(duì)象來(lái)構(gòu)造真實(shí)DOM。

VNode存放哪些信息

1. data：存儲(chǔ)節(jié)點(diǎn)的屬性，綁定的事件等
2. elm：真實(shí)DOM 節(jié)點(diǎn)
3. context：渲染這個(gè)模板的上下文對(duì)象
4. isStatic：是否是靜態(tài)節(jié)點(diǎn)
   …

VNode存放

在初始化完選項(xiàng)，解析完模板之后，就需要掛載DOM了。此時(shí)就需要生成VNode，才能根據(jù) VNode生成DOM然后掛載。創(chuàng)建出來(lái)的VNode需要被存起來(lái)，主要存放在三個(gè)位置：parent，_vnode，$vnode。

后記

VNode虛擬節(jié)點(diǎn)是Vue框架中一個(gè)非常重要的概念，深入的學(xué)習(xí)與了解，有助于進(jìn)一步加深對(duì)Vue框架的理解與運(yùn)用。

最新評(píng)論