引言
回顧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 函式。