淺析Vue源碼（七）——render到VNode的生成

時間 2019-11-16

標籤淺析 vue 源碼 render vnode 生成简体版

原文原文鏈接

淺析Vue源碼（四）—— $mount中template的編譯--parsehtml

淺析Vue源碼（五）—— $mount中template的編譯--optimizevue

淺析Vue源碼（六）—— $mount中template的編譯--generatenode

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

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

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: 當前節點的標籤名bash

data: 當前節點對應的對象，包含了具體的一些數據信息，是一個VNodeData類型，能夠參考VNodeData類型中的數據信息app

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

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