前面我們用三片文章介紹了compile解析template，完成了 template --> AST --> render function 的過程。這篇我們主要介紹一下VNode的生成過程，在此之前，我們先來簡單的瞭解一下什麼是VNode？

先來看一下Vue.js原始碼中對VNode類的定義。

src/core/vdom/vnode.js

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
  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
    /*當前節點對應的物件，包含了具體的一些資料資訊，是一個VNodeData型別，可以參考VNodeData型別中的資料資訊*/
    this.data = data
    /*當前節點的子節點，是一個數組*/
    this.children = children
    /*當前節點的文字*/
    this.text = text
    /*當前虛擬節點對應的真實dom節點*/
    this.elm = elm
    /*當前節點的名字空間*/
    this.ns = undefined
    /*編譯作用域*/
    this.context = context
    /*函式化元件作用域*/
    this.functionalContext = undefined
    /*節點的key屬性，被當作節點的標誌，用以優化*/
    this.key = data && data.key
    /*元件的option選項*/
    this.componentOptions = componentOptions
    /*當前節點對應的元件的例項*/
    this.componentInstance = undefined
    /*當前節點的父節點*/
    this.parent = undefined
    /*簡而言之就是是否為原生HTML或只是普通文字，innerHTML的時候為true，textContent的時候為false*/
    this.raw = false
    /*靜態節點標誌*/
    this.isStatic = false
    /*是否作為跟節點插入*/
    this.isRootInsert = true
    /*是否為註釋節點*/
    this.isComment = false
    /*是否為克隆節點*/
    this.isCloned = false
    /*是否有v-once指令*/
    this.isOnce = false
    /*非同步元件的工廠方法*/
    this.asyncFactory = asyncFactory
    /*非同步源*/
    this.asyncMeta = undefined
    /*是否非同步的預賦值*/
    this.isAsyncPlaceholder = false
  }

  // DEPRECATED: alias for componentInstance for backwards compat.
  /* istanbul ignore next */
  get child (): Component | void {
    return this.componentInstance
  }
}
 

這是一個最基礎的VNode節點，作為其他派生VNode類的基類，裡面定義了下面這些資料。

tag: 當前節點的標籤名

data: 當前節點對應的物件，包含了具體的一些資料資訊，是一個VNodeData型別，可以參考VNodeData型別中的資料資訊

children: 當前節點的子節點，是一個數組

text: 當前節點的文字

elm: 當前虛擬節點對應的真實dom節點

ns: 當前節點的名字空間

context: 當前節點的編譯作用域

functionalContext: 函式化元件作用域

key: 節點的key屬性，被當作節點的標誌，用以優化

componentOptions: 元件的option選項

componentInstance: 當前節點對應的元件的例項

parent: 當前節點的父節點

raw: 簡而言之就是是否為原生HTML或只是普通文字，innerHTML的時候為true，textContent的時候為false

isStatic: 是否為靜態節點

isRootInsert: 是否作為跟節點插入

isComment: 是否為註釋節點

isCloned: 是否為克隆節點

isOnce: 是否有v-once指令

asyncFactory：非同步元件的工廠方法

asyncMeta：非同步源

isAsyncPlaceholder：是否非同步的預賦值

包含了我們常用的一些標記節點的屬性，為什麼是VNode？其實網上已經有大量的資料可以瞭解到VNode的優勢，比如大量副互動的效能優勢，ssr的支援，跨平臺Weex的支援…這裡不再贅述。我們接下來看一下VNode的基本分類：

我們首先來看一個例子：

{
    tag: 'div'
    data: {
        class: 'test'
    },
    children: [
        {
            tag: 'span',
            data: {
                class: 'demo'
            }
            text: 'hello,VNode'
        }
    ]
}

渲染之後的結果就是這樣的

<div class="test">
    <span class="demo">hello,VNode</span>
</div>

生成 VNode

有了之前章節的知識，現在我們需要編譯下面這段template

<div id="app">
  <header>
    <h1>I'm a template!</h1>
  </header>
  <p v-if="message">
    {{ message }}
  </p>
  <p v-else>
    No message.
  </p>
</div>

得到這樣的render function

(function() {
  with(this){
    return _c('div',{   //建立一個 div 元素
      attrs:{"id":"app"}  //div 新增屬性 id
      },[
        _m(0),  //靜態節點 header，此處對應 staticRenderFns 陣列索引為 0 的 render function
        _v(" "), //空的文字節點
        (message) //三元表示式，判斷 message 是否存在
         //如果存在，建立 p 元素，元素裡面有文字，值為 toString(message)
        ?_c('p',[_v("\n    "+_s(message)+"\n  ")])
        //如果不存在，建立 p 元素，元素裡面有文字，值為 No message.
        :_c('p',[_v("\n    No message.\n  ")])
      ]
    )
  }
})

要看懂上面的 render function，只需要瞭解 _c，_m，_v，_s這幾個函式的定義，其中 _c 是 createElement，_m 是 renderStatic，_v 是 createTextVNode，_s 是 toString。 我們在編譯的過程中呼叫了vm._render() 方法，其中_render函式中有這樣一句：

const { render, _parentVnode } = vm.$options
...
vnode = render.call(vm._renderProxy, vm.$createElement)

接下來我們系統的講一個如何建立Vnode。

生成一個新的VNode的方法

createEmptyVNode 建立一個空VNode節點

/*建立一個空VNode節點*/
export const createEmptyVNode = () => {
  const node = new VNode()
  node.text = ''
  node.isComment = true
  return node
}

createTextVNode 建立一個文字節點

/*建立一個文字節點*/
export function createTextVNode (val: string | number) {
  return new VNode(undefined, undefined, undefined, String(val))
}

createComponent 建立一個元件節點

src/core/vdom/create-element.js

// wrapper function for providing a more flexible interface
// without getting yelled at by flow
export function createElement (
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: any,
  alwaysNormalize: boolean
): VNode | Array<VNode> {
/*相容不傳data的情況*/
  if (Array.isArray(data) || isPrimitive(data)) {
    normalizationType = children
    children = data
    data = undefined
  }
  /*如果alwaysNormalize為true，則normalizationType標記為ALWAYS_NORMALIZE*/
  if (isTrue(alwaysNormalize)) {
    normalizationType = ALWAYS_NORMALIZE
  }
  /*建立虛擬節點*/
  return _createElement(context, tag, data, children, normalizationType)
}
/*建立虛擬節點*/
export function _createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array<VNode> {
/*
    如果傳遞data引數且data的__ob__已經定義（代表已經被observed，上面綁定了Oberver物件），
    https://cn.vuejs.org/v2/guide/render-function.html#約束
    那麼建立一個空節點
  */
  if (isDef(data) && isDef((data: any).__ob__)) {
    process.env.NODE_ENV !== 'production' && warn(
      `Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
      'Always create fresh vnode data objects in each render!',
      context
    )
    return createEmptyVNode()
  }
  // object syntax in v-bind
  if (isDef(data) && isDef(data.is)) {
    tag = data.is
  }
  /*如果tag不存在也是建立一個空節點*/
  if (!tag) {
    // in case of component :is set to falsy value
    return createEmptyVNode()
  }
  // warn against non-primitive key
  if (process.env.NODE_ENV !== 'production' &&
    isDef(data) && isDef(data.key) && !isPrimitive(data.key)
  ) {
    if (!__WEEX__ || !('@binding' in data.key)) {
      warn(
        'Avoid using non-primitive value as key, ' +
        'use string/number value instead.',
        context
      )
    }
  }
  // support single function children as default scoped slot
  /*預設作用域插槽*/
  if (Array.isArray(children) &&
    typeof children[0] === 'function'
  ) {
    data = data || {}
    data.scopedSlots = { default: children[0] }
    children.length = 0
  }
  if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
  }
  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor 
    /*獲取tag的名字空間*/
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    /*判斷是否是保留的標籤*/
    if (config.isReservedTag(tag)) {
      // platform built-in elements
       /*如果是保留的標籤則建立一個相應節點*/
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // component
      /*從vm例項的option的components中尋找該tag，存在則就是一個元件，建立相應節點，Ctor為元件的構造類*/
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      // unknown or unlisted namespaced elements
      // check at runtime because it may get assigned a namespace when its
      // parent normalizes children
      /*未知的元素，在執行時檢查，因為父元件可能在序列化子元件的時候分配一個名字空間*/
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    // direct component options / constructor
     /*tag不是字串的時候則是元件的構造類*/
    vnode = createComponent(tag, data, context, children)
  }
  if (Array.isArray(vnode)) {
    return vnode
  } else if (isDef(vnode)) {
  /*如果有名字空間，則遞迴所有子節點應用該名字空間*/
    if (isDef(ns)) applyNS(vnode, ns)
    if (isDef(data)) registerDeepBindings(data)
    return vnode
  } else {
  /*如果vnode沒有成功建立則建立空節點*/
    return createEmptyVNode()
  }
}

createElement用來建立一個虛擬節點。當data上已經繫結__ob__的時候，代表該物件已經被Oberver過了，所以建立一個空節點。tag不存在的時候同樣建立一個空節點。當tag不是一個String型別的時候代表tag是一個元件的構造類，直接用new VNode建立。當tag是String型別的時候，如果是保留標籤，則用new VNode建立一個VNode例項，如果在vm的option的components找得到該tag，代表這是一個元件，否則統一用new VNode建立。

要是喜歡就給我一個star，github