Vue源碼探祕（七）（createElement）

引言

回顧Vue 源碼探祕（五）（_render 函數的實現），vm._c和vm.$createElement最終都調用了createElement函數來實現。

而且咱們知道：vm._c是內部函數，它是被模板編譯成的 render 函數使用；而 vm.$createElement是提供給用戶編寫的 render 函數使用的。

這一節，我帶你們一塊兒來看下createElement函數的內部實現。

createElement

createElement函數定義在src/core/vdom/create-element.js文件中：

// 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> {
  if (Array.isArray(data) || isPrimitive(data)) {
    normalizationType = children
    children = data
    data = undefined
  }
  if (isTrue(alwaysNormalize)) {
    normalizationType = ALWAYS_NORMALIZE
  }
  return _createElement(context, tag, data, children, normalizationType)
}
複製代碼

createElement 方法其實是對 _createElement 方法的封裝。對傳入 _createElement 函數的參數進行了處理。

這裏的第一個if語句判斷data若是是數組或者是原始類型（不包括null、undefined），就調整參數位置，即後面的參數都往前移一位，children參數替代原有的data。

這裏意思就是能夠不傳data參數。有點函數重載的意思在裏面。

第二個if語句判斷傳入createElement的最後一個參數alwaysNormalize的值，若是爲true，就賦給normalizationType一個常量值ALWAYS_NORMALIZE，而後再將normalizationType傳給_createElement。關於常量的定義在這裏：

// src/core/vdom/create-element.js

const SIMPLE_NORMALIZE = 1
const ALWAYS_NORMALIZE = 2
複製代碼

最後返回調用_createElement的返回值。下面咱們來重點分析下_createElement：

// src/core/vdom/create-element.js

export function _createElement (
 context: Component,
 tag?: string | Class<Component> | Function | Object,
 data?: VNodeData,
 children?: any,
 normalizationType?: number
): VNode | Array<VNode> {
  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()
  }

  // ...
}
複製代碼

先來看第一段，對data參數進行校驗。這裏判斷data是否含有__ob__屬性。

在 Vue 中被觀察的 data 都會添加上 __ob__ ，這一塊咱們會在響應式原理模塊具體介紹。

_createElement 函數要求傳入的 data 參數不能是被觀察的 data，若是是會拋出警告並返回一個利用createEmptyVNode方法建立的空的 VNode。

繼續往下看：

// src/core/vdom/create-element.js

export function _createElement (
 context: Component,
 tag?: string | Class<Component> | Function | Object,
 data?: VNodeData,
 children?: any,
 normalizationType?: number
): VNode | Array<VNode> {
  //...

  // object syntax in v-bind
  if (isDef(data) && isDef(data.is)) {
    tag = data.is
  }
  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
  }

  // ...
}
複製代碼

先判斷data有沒有is屬性（也就是判斷是不是動態組件）。

關於動態組件不是太清楚的話，可直接去官網查詢。

若是有的話，將data.is賦值給tag。接着判斷若是tag不存在（也就是判斷data.is爲false），返回一個空的VNode。

接下來檢查data.key，若是不是原始類型則拋出警告。

最後的if語句涉及到插槽（slot）的內容，這部分我會在後面介紹插槽部分的源碼時具體分析。咱們接着往下看：

// src/core/vdom/create-element.js
export function _createElement (
 context: Component,
 tag?: string | Class<Component> | Function | Object,
 data?: VNodeData,
 children?: any,
 normalizationType?: number
): VNode | Array<VNode> {
  // ...

  if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
  }

  // ...
}
複製代碼

這一段是對參數children的處理，將其規範化。

回顧Vue 源碼探祕（五）（_render 函數的實現），咱們知道vm._c和vm.$createElement函數在調用createElement函數時最後一個參數normalizationType分別是false和true。對應_createElement的normalizationType分別是SIMPLE_NORMALIZE和ALWAYS_NORMALIZE。咱們先來看下simpleNormalizeChildren函數：

// src/core/vdom/helpers/normalize-children.js

// The template compiler attempts to minimize the need for normalization by
// statically analyzing the template at compile time.
//
// For plain HTML markup, normalization can be completely skipped because the
// generated render function is guaranteed to return Array<VNode>. There are
// two cases where extra normalization is needed:

// 1. When the children contains components - because a functional component
// may return an Array instead of a single root. In this case, just a simple
// normalization is needed - if any child is an Array, we flatten the whole
// thing with Array.prototype.concat. It is guaranteed to be only 1-level deep
// because functional components already normalize their own children.
export function simpleNormalizeChildren (children: any) {
  for (let i = 0; i < children.length; i++) {
    if (Array.isArray(children[i])) {
      return Array.prototype.concat.apply([], children)
    }
  }
  return children
}
複製代碼

看下函數前面的兩段註釋：

• 第一段的意思是若是用戶使用的是 純HTML標記的字符串模板，就能夠跳過處理。由於 render函數是由內部編譯出來的，能夠保證 render函數會返回 Array<VNode>。可是有兩種特殊狀況須要處理，來規範化 children參數。
• 第二段的註釋說明了第一種特殊狀況，就是 children中包含了函數式組件。函數式組件可能返回一個數組也可能只返回一個根節點。若是返回的是數組，咱們須要去作扁平化處理，即將 children轉換爲一維數組。

看完註釋，咱們再來看simpleNormalizeChildren函數就很清晰了。就是簡單的把二維數組拍平成一維數組。接着看下normalizeChildren函數：

// src/core/vdom/helpers/normalize-children.js

// 2. When the children contains constructs that always generated nested Arrays,
// e.g. <template>, <slot>, v-for, or when the children is provided by user
// with hand-written render functions / JSX. In such cases a full normalization
// is needed to cater to all possible types of children values.
export function normalizeChildren (children: any): ?Array<VNode> {
  return isPrimitive(children)
    ? [createTextVNode(children)]
    : Array.isArray(children)
      ? normalizeArrayChildren(children)
      : undefined
}
複製代碼

這裏就是上面提到的第二種狀況。依舊咱們先來看下注釋，註釋提到了兩種適用的狀況：

• 一是編譯 <template>、 <slot>、 v-for的時候會產生嵌套數組
• 二是用戶手動編寫了 render函數或 JSX

先判斷children是否是原始類型，是的話返回一個數組，數組項是createTextVNode(children)的返回值。來看下createTextVNode函數：

// src/core/vdom/vnode.js

export function createTextVNode (val: string | number) {
  return new VNode(undefined, undefined, undefined, String(val))
}
複製代碼

函數比較簡單，就是返回一個文本節點的VNode。

回到normalizeChildren函數，若是不是原始類型，再判斷children是不是數組。若是是數組的話返回normalizeArrayChildren(children)的返回值，不然返回undefined。

咱們回到 _createElement 函數，繼續看下一段代碼：

// src/core/vdom/create-element.js

export function _createElement (
 context: Component,
 tag?: string | Class<Component> | Function | Object,
 data?: VNodeData,
 children?: any,
 normalizationType?: number
): VNode | Array<VNode> {
  // ...

  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    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 ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // component
      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
    vnode = createComponent(tag, data, context, children)
  }

  // ...
}
複製代碼

if 語句判斷 tag若是是字符串的狀況，這裏調用的 config.isReservedTag 函數是判斷若是 tag 是內置標籤則直接建立一個對應的 VNode 對象。

而後判斷 tag 若是是已註冊的組件名，則調用 createComponent 函數。

最後一種狀況是tag是一個未知的標籤名，這裏會直接按標籤名建立 VNode，而後等運行時再來檢查，由於它的父級規範化子級時可能會爲其分配命名空間。

else裏面的邏輯涉及到組件化和createComponent函數，這塊我會放在後面的組件化源碼解讀部分詳細說明。

接着看下_createElement 函數的最後一段代碼：

// src/core/vdom/create-element.js

export function _createElement (
 context: Component,
 tag?: string | Class<Component> | Function | Object,
 data?: VNodeData,
 children?: any,
 normalizationType?: number
): VNode | Array<VNode> {
  // ...

  if (Array.isArray(vnode)) {
    return vnode
  } else if (isDef(vnode)) {
    if (isDef(ns)) applyNS(vnode, ns)
    if (isDef(data)) registerDeepBindings(data)
    return vnode
  } else {
    return createEmptyVNode()
  }
}
複製代碼

這裏實際上是在最後對vnode又作了一次校驗，最後返回vnode。

總結

到這裏，咱們就把經過createELement 函數建立一個 VNode 的過程分析清楚了。回顧Vue 源碼探祕（四）（實例掛載$mount），咱們在分析 $mount 函數時瞭解到，建立 Watcher 對象後會執行 updateComponent 函數：

updateComponent = () => {
  vm._update(vm._render(), hydrating)
}
複製代碼

如今咱們已經將 _render() 函數包括涉及到的createElement 函數分析完了，下一節咱們就來一塊兒看下_update 函數。