前言
上一篇文章 Vue 原始碼解讀（10）—— 編譯器 之 生成渲染函式 最後講到元件更新時，需要先執行編譯器生成的渲染函式得到元件的 vnode。
渲染函式之所以能生成 vnode 是通過其中的 _c、_l、、_v、_s 等方法實現的。比如：
-
普通的節點被編譯成了可執行 _c 函式
-
v-for 節點被編譯成了可執行的 _l 函式
-
...
但是到目前為止我們都不清楚這些方法的原理，它們是如何生成 vnode 的？只知道它們是 Vue 例項方法，今天我們就從原始碼中找答案。
目標
在 Vue 編譯器的基礎上，進一步深入理解一個元件是如何通過這些執行時的工具方法（render helper）生成 VNode 的
原始碼解讀
入口
我們知道這些方法是 Vue 例項方法，按照之前對原始碼的瞭解，例項方法一般都放在 /src/core/instance 目錄下。其實之前在 Vue 原始碼解讀（6）—— 例項方法 閱讀中見到過 render helper，在文章的最後。
/src/core/instance/render.js
export function renderMixin (Vue: Class<Component>) {
// install runtime convenience helpers
// 在元件例項上掛載一些執行時需要用到的工具方法
installRenderHelpers(Vue.prototype)
// ...
}
installRenderHelpers
/src/core/instance/render-helpers/index.js
/**
* 在例項上掛載簡寫的渲染工具函式，這些都是執行時程式碼
* 這些工具函式在編譯器生成的渲染函式中被使用到了
* @param {*} target Vue 例項
*/
export function installRenderHelpers(target: any) {
/**
* v-once 指令的執行時幫助程式，為 VNode 加上打上靜態標記
* 有點多餘，因為含有 v-once 指令的節點都被當作靜態節點處理了，所以也不會走這兒
*/
target._o = markOnce
// 將值轉換為數字
target._n = toNumber
/**
* 將值轉換為字串形式，普通值 => String(val)，物件 => JSON.stringify(val)
*/
target._s = toString
/**
* 執行時渲染 v-for 列表的幫助函式，迴圈遍歷 val 值，依次為每一項執行 render 方法生成 VNode，最終返回一個 VNode 陣列
*/
target._l = renderList
target._t = renderSlot
/**
* 判斷兩個值是否相等
*/
target._q = looseEqual
/**
* 相當於 indexOf 方法
*/
target._i = looseIndexOf
/**
* 執行時負責生成靜態樹的 VNode 的幫助程式，完成了以下兩件事
* 1、執行 staticRenderFns 陣列中指定下標的渲染函式，生成靜態樹的 VNode 並快取，下次在渲染時從快取中直接讀取（isInFor 必須為 true）
* 2、為靜態樹的 VNode 打靜態標記
*/
target._m = renderStatic
target._f = resolveFilter
target._k = checkKeyCodes
target._b = bindObjectProps
/**
* 為文字節點建立 VNode
*/
target._v = createTextVNode
/**
* 為空節點建立 VNode
*/
target._e = createEmptyVNode
}
_o = markOnce
/src/core/instance/render-helpers/render-static.js
/**
* Runtime helper for v-once.
* Effectively it means marking the node as static with a unique key.
* v-once 指令的執行時幫助程式，為 VNode 加上打上靜態標記
* 有點多餘，因為含有 v-once 指令的節點都被當作靜態節點處理了，所以也不會走這兒
*/
export function markOnce (
tree: VNode | Array<VNode>,
index: number,
key: string
) {
markStatic(tree, `__once__${index}${key ? `_${key}` : ``}`, true)
return tree
}
markStatic
/src/core/instance/render-helpers/render-static.js
/**
* 為 VNode 打靜態標記，在 VNode 上新增三個屬性：
* { isStatick: true, key: xx, isOnce: true or false }
*/
function markStatic (
tree: VNode | Array<VNode>,
key: string,
isOnce: boolean
) {
if (Array.isArray(tree)) {
// tree 為 VNode 陣列，迴圈遍歷其中的每個 VNode，為每個 VNode 做靜態標記
for (let i = 0; i < tree.length; i++) {
if (tree[i] && typeof tree[i] !== 'string') {
markStaticNode(tree[i], `${key}_${i}`, isOnce)
}
}
} else {
markStaticNode(tree, key, isOnce)
}
}
markStaticNode
/src/core/instance/render-helpers/render-static.js
/**
* 標記靜態 VNode
*/
function markStaticNode (node, key, isOnce) {
node.isStatic = true
node.key = key
node.isOnce = isOnce
}
_l = renderList
/src/core/instance/render-helpers/render-list.js
/**
* Runtime helper for rendering v-for lists.
* 執行時渲染 v-for 列表的幫助函式，迴圈遍歷 val 值，依次為每一項執行 render 方法生成 VNode，最終返回一個 VNode 陣列
*/
export function renderList (
val: any,
render: (
val: any,
keyOrIndex: string | number,
index?: number
) => VNode
): ?Array<VNode> {
let ret: ?Array<VNode>, i, l, keys, key
if (Array.isArray(val) || typeof val === 'string') {
// val 為陣列或者字串
ret = new Array(val.length)
for (i = 0, l = val.length; i < l; i++) {
ret[i] = render(val[i], i)
}
} else if (typeof val === 'number') {
// val 為一個數值，則遍歷 0 - val 的所有數字
ret = new Array(val)
for (i = 0; i < val; i++) {
ret[i] = render(i + 1, i)
}
} else if (isObject(val)) {
// val 為一個物件，遍歷物件
if (hasSymbol && val[Symbol.iterator]) {
// val 為一個可迭代物件
ret = []
const iterator: Iterator<any> = val[Symbol.iterator]()
let result = iterator.next()
while (!result.done) {
ret.push(render(result.value, ret.length))
result = iterator.next()
}
} else {
// val 為一個普通物件
keys = Object.keys(val)
ret = new Array(keys.length)
for (i = 0, l = keys.length; i < l; i++) {
key = keys[i]
ret[i] = render(val[key], key, i)
}
}
}
if (!isDef(ret)) {
ret = []
}
// 返回 VNode 陣列
(ret: any)._isVList = true
return ret
}
_m = renderStatic
/src/core/instance/render-helpers/render-static.js
/**
* Runtime helper for rendering static trees.
* 執行時負責生成靜態樹的 VNode 的幫助程式，完成了以下兩件事
* 1、執行 staticRenderFns 陣列中指定下標的渲染函式，生成靜態樹的 VNode 並快取，下次在渲染時從快取中直接讀取（isInFor 必須為 true）
* 2、為靜態樹的 VNode 打靜態標記
* @param { number} index 表示當前靜態節點的渲染函式在 staticRenderFns 陣列中的下標索引
* @param { boolean} isInFor 表示當前靜態節點是否被包裹在含有 v-for 指令的節點內部
*/
export function renderStatic (
index: number,
isInFor: boolean
): VNode | Array<VNode> {
// 快取，靜態節點第二次被渲染時就從快取中直接獲取已快取的 VNode
const cached = this._staticTrees || (this._staticTrees = [])
let tree = cached[index]
// if has already-rendered static tree and not inside v-for,
// we can reuse the same tree.
// 如果當前靜態樹已經被渲染過一次（即有快取）而且沒有被包裹在 v-for 指令所在節點的內部，則直接返回快取的 VNode
if (tree && !isInFor) {
return tree
}
// 執行 staticRenderFns 陣列中指定元素（靜態樹的渲染函式）生成該靜態樹的 VNode，並快取
// otherwise, render a fresh tree.
tree = cached[index] = this.$options.staticRenderFns[index].call(
this._renderProxy,
null,
this // for render fns generated for functional component templates
)
// 靜態標記，為靜態樹的 VNode 打標記，即新增 { isStatic: true, key: `__static__${index}`, isOnce: false }
markStatic(tree, `__static__${index}`, false)
return tree
}
_c
/src/core/instance/render.js
/**
* 定義 _c，它是 createElement 的一個柯里化方法
* @param {*} a 標籤名
* @param {*} b 屬性的 JSON 字串
* @param {*} c 子節點陣列
* @param {*} d 節點的規範化型別
* @returns VNode or Array<VNode>
*/
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
createElement
/src/core/vdom/create-element.js
/**
* 生成元件或普通標籤的 vnode，一個包裝函式，不用管
* 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
}
// 執行 _createElement 方法建立元件的 VNode
return _createElement(context, tag, data, children, normalizationType)
}
_createElement
/src/core/vdom/create-element.js
/**
* 生成 vnode，
* 1、平臺保留標籤和未知元素執行 new Vnode() 生成 vnode
* 2、元件執行 createComponent 生成 vnode
* 2.1 函式式元件執行自己的 render 函式生成 VNode
* 2.2 普通元件則例項化一個 VNode，並且在其 data.hook 物件上設定 4 個方法，在元件的 patch 階段會被呼叫，
* 從而進入子元件的例項化、掛載階段，直至完成渲染
* @param {*} context 上下文
* @param {*} tag 標籤
* @param {*} data 屬性 JSON 字串
* @param {*} children 子節點陣列
* @param {*} normalizationType 節點規範化型別
* @returns VNode or Array<VNode>
*/
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
)
// 如果屬性是一個響應式物件，則返回一個空節點的 VNode
return createEmptyVNode()
}
// object syntax in v-bind
if (isDef(data) && isDef(data.is)) {
tag = data.is
}
if (!tag) {
// 動態元件的 is 屬性是一個假值時 tag 為 false，則返回一個空節點的 VNode
// in case of component :is set to falsy value
return createEmptyVNode()
}
// 檢測唯一鍵 key，只能是字串或者數字
// 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') {
// 標籤是字串時，該標籤有三種可能：
// 1、平臺保留標籤
// 2、自定義元件
// 3、不知名標籤
let Ctor
// 名稱空間
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) {
// tag 是平臺原生標籤
// platform built-in elements
if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
// v-on 指令的 .native 只在元件上生效
warn(
`The .native modifier for v-on is only valid on components but it was used on <${tag}>.`,
context
)
}
// 例項化一個 VNode
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
)
} else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
// tag 是一個自定義元件
// 在 this.$options.components 物件中找到指定標籤名稱的元件建構函式
// 建立元件的 VNode，函式式元件直接執行其 render 函式生成 VNode，
// 普通元件則例項化一個 VNode，並且在其 data.hook 物件上設定了 4 個方法，在元件的 patch 階段會被呼叫，
// 從而進入子元件的例項化、掛載階段，直至完成渲染
// component
vnode = createComponent(Ctor, data, context, children, tag)
} else {
// 不知名的一個標籤，但也生成 VNode，因為考慮到在執行時可能會給一個合適的名字空間
// 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 {
// tag 為非字串，比如可能是一個元件的配置物件或者是一個元件的建構函式
// direct component options / constructor
vnode = createComponent(tag, data, context, children)
}
// 返回元件的 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()
}
}
createComponent
/src/core/vdom/create-component.js
/**
* 建立元件的 VNode，
* 1、函式式元件通過執行其 render 方法生成元件的 VNode
* 2、普通元件通過 new VNode() 生成其 VNode，但是普通元件有一個重要操作是在 data.hook 物件上設定了四個鉤子函式，
* 分別是 init、prepatch、insert、destroy，在元件的 patch 階段會被呼叫，
* 比如 init 方法，呼叫時會進入子元件例項的建立掛載階段，直到完成渲染
* @param {*} Ctor 元件建構函式
* @param {*} data 屬性組成的 JSON 字串
* @param {*} context 上下文
* @param {*} children 子節點陣列
* @param {*} tag 標籤名
* @returns VNode or Array<VNode>
*/
export function createComponent(
Ctor: Class<Component> | Function | Object | void,
data: ?VNodeData,
context: Component,
children: ?Array<VNode>,
tag?: string
): VNode | Array<VNode> | void {
// 元件建構函式不存在，直接結束
if (isUndef(Ctor)) {
return
}
// Vue.extend
const baseCtor = context.$options._base
// 當 Ctor 為配置物件時，通過 Vue.extend 將其轉為建構函式
// plain options object: turn it into a constructor
if (isObject(Ctor)) {
Ctor = baseCtor.extend(Ctor)
}
// 如果到這個為止，Ctor 仍然不是一個函式，則表示這是一個無效的元件定義
// if at this stage it's not a constructor or an async component factory,
// reject.
if (typeof Ctor !== 'function') {
if (process.env.NODE_ENV !== 'production') {
warn(`Invalid Component definition: ${String(Ctor)}`, context)
}
return
}
// 非同步元件
// async component
let asyncFactory
if (isUndef(Ctor.cid)) {
asyncFactory = Ctor
Ctor = resolveAsyncComponent(asyncFactory, baseCtor)
if (Ctor === undefined) {
// 為非同步元件返回一個佔位符節點，元件被渲染為註釋節點，但保留了節點的所有原始資訊，這些資訊將用於非同步伺服器渲染 和 hydration
return createAsyncPlaceholder(
asyncFactory,
data,
context,
children,
tag
)
}
}
// 節點的屬性 JSON 字串
data = data || {}
// 這裡其實就是元件做選項合併的地方，即編譯器將元件編譯為渲染函式，渲染時執行 render 函式，然後執行其中的 _c，就會走到這裡了
// 解析建構函式選項，併合基類選項，以防止在元件建構函式建立後應用全域性混入
// resolve constructor options in case global mixins are applied after
// component constructor creation
resolveConstructorOptions(Ctor)
// 將元件的 v-model 的資訊（值和回撥）轉換為 data.attrs 物件的屬性、值和 data.on 物件上的事件、回撥
// transform component v-model data into props & events
if (isDef(data.model)) {
transformModel(Ctor.options, data)
}
// 提取 props 資料，得到 propsData 物件，propsData[key] = val
// 以元件 props 配置中的屬性為 key，父元件中對應的資料為 value
// extract props
const propsData = extractPropsFromVNodeData(data, Ctor, tag)
// 函式式元件
// functional component
if (isTrue(Ctor.options.functional)) {
/**
* 執行函式式元件的 render 函式生成元件的 VNode，做了以下 3 件事：
* 1、設定元件的 props 物件
* 2、設定函式式元件的渲染上下文，傳遞給函式式元件的 render 函式
* 3、呼叫函式式元件的 render 函式生成 vnode
*/
return createFunctionalComponent(Ctor, propsData, data, context, children)
}
// 獲取事件監聽器物件 data.on，因為這些監聽器需要作為子元件監聽器處理，而不是 DOM 監聽器
// extract listeners, since these needs to be treated as
// child component listeners instead of DOM listeners
const listeners = data.on
// 將帶有 .native 修飾符的事件物件賦值給 data.on
// replace with listeners with .native modifier
// so it gets processed during parent component patch.
data.on = data.nativeOn
if (isTrue(Ctor.options.abstract)) {
// 如果是抽象元件，則值保留 props、listeners 和 slot
// abstract components do not keep anything
// other than props & listeners & slot
// work around flow
const slot = data.slot
data = {}
if (slot) {
data.slot = slot
}
}
/**
* 在元件的 data 物件上設定 hook 物件，
* hook 物件增加四個屬性，init、prepatch、insert、destroy，
* 負責元件的建立、更新、銷燬，這些方法在元件的 patch 階段會被呼叫
* install component management hooks onto the placeholder node
*/
installComponentHooks(data)
const name = Ctor.options.name || tag
// 例項化元件的 VNode，對於普通元件的標籤名會比較特殊，vue-component-${cid}-${name}
const vnode = new VNode(
`vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
data, undefined, undefined, undefined, context,
{ Ctor, propsData, listeners, tag, children },
asyncFactory
)
// Weex specific: invoke recycle-list optimized @render function for
// extracting cell-slot template.
// https://github.com/Hanks10100/weex-native-directive/tree/master/component
/* istanbul ignore if */
if (__WEEX__ && isRecyclableComponent(vnode)) {
return renderRecyclableComponentTemplate(vnode)
}
return vnode
}
resolveConstructorOptions
/src/core/instance/init.js
/**
* 從建構函式上解析配置項
*/
export function resolveConstructorOptions (Ctor: Class<Component>) {
// 從例項建構函式上獲取選項
let options = Ctor.options
if (Ctor.super) {
const superOptions = resolveConstructorOptions(Ctor.super)
// 快取
const cachedSuperOptions = Ctor.superOptions
if (superOptions !== cachedSuperOptions) {
// 說明基類的配置項發生了更改
// super option changed,
// need to resolve new options.
Ctor.superOptions = superOptions
// check if there are any late-modified/attached options (#4976)
// 找到更改的選項
const modifiedOptions = resolveModifiedOptions(Ctor)
// update base extend options
if (modifiedOptions) {
// 將更改的選項和 extend 選項合併
extend(Ctor.extendOptions, modifiedOptions)
}
// 將新的選項賦值給 options
options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions)
if (options.name) {
options.components[options.name] = Ctor
}
}
}
return options
}
resolveModifiedOptions
/src/core/instance/init.js
/**
* 解析建構函式選項中後續被修改或者增加的選項
*/
function resolveModifiedOptions (Ctor: Class<Component>): ?Object {
let modified
// 建構函式選項
const latest = Ctor.options
// 密封的建構函式選項，備份
const sealed = Ctor.sealedOptions
// 對比兩個選項，記錄不一致的選項
for (const key in latest) {
if (latest[key] !== sealed[key]) {
if (!modified) modified = {}
modified[key] = latest[key]
}
}
return modified
}
transformModel
src/core/vdom/create-component.js
/**
* 將元件的 v-model 的資訊（值和回撥）轉換為 data.attrs 物件的屬性、值和 data.on 物件上的事件、回撥
* transform component v-model info (value and callback) into
* prop and event handler respectively.
*/
function transformModel(options, data: any) {
// model 的屬性和事件，預設為 value 和 input
const prop = (options.model && options.model.prop) || 'value'
const event = (options.model && options.model.event) || 'input'
// 在 data.attrs 物件上儲存 v-model 的值
; (data.attrs || (data.attrs = {}))[prop] = data.model.value
// 在 data.on 物件上儲存 v-model 的事件
const on = data.on || (data.on = {})
// 已存在的事件回撥函式
const existing = on[event]
// v-model 中事件對應的回撥函式
const callback = data.model.callback
// 合併回撥函式
if (isDef(existing)) {
if (
Array.isArray(existing)
? existing.indexOf(callback) === -1
: existing !== callback
) {
on[event] = [callback].concat(existing)
}
} else {
on[event] = callback
}
}
extractPropsFromVNodeData
/src/core/vdom/helpers/extract-props.js
/**
* <comp :msg="hello vue"></comp>
*
* 提取 props，得到 res[key] = val
*
* 以 props 配置中的屬性為 key，父元件中對應的的資料為 value
* 當父元件中資料更新時，觸發響應式更新，重新執行 render，生成新的 vnode，又走到這裡
* 這樣子元件中相應的資料就會被更新
*/
export function extractPropsFromVNodeData (
data: VNodeData, // { msg: 'hello vue' }
Ctor: Class<Component>, // 元件建構函式
tag?: string // 元件標籤名
): ?Object {
// 元件的 props 選項，{ props: { msg: { type: String, default: xx } } }
// 這裡只提取原始值，驗證和預設值在子元件中處理
// we are only extracting raw values here.
// validation and default values are handled in the child
// component itself.
const propOptions = Ctor.options.props
if (isUndef(propOptions)) {
// 未定義 props 直接返回
return
}
// 以元件 props 配置中的屬性為 key，父元件傳遞下來的值為 value
// 當父元件中資料更新時，觸發響應式更新，重新執行 render，生成新的 vnode，又走到這裡
// 這樣子元件中相應的資料就會被更新
const res = {}
const { attrs, props } = data
if (isDef(attrs) || isDef(props)) {
// 遍歷 propsOptions
for (const key in propOptions) {
// 將小駝峰形式的 key 轉換為 連字元 形式
const altKey = hyphenate(key)
// 提示，如果宣告的 props 為小駝峰形式（testProps），但由於 html 不區分大小寫，所以在 html 模版中應該使用 test-props 代替 testProps
if (process.env.NODE_ENV !== 'production') {
const keyInLowerCase = key.toLowerCase()
if (
key !== keyInLowerCase &&
attrs && hasOwn(attrs, keyInLowerCase)
) {
tip(
`Prop "${keyInLowerCase}" is passed to component ` +
`${formatComponentName(tag || Ctor)}, but the declared prop name is` +
` "${key}". ` +
`Note that HTML attributes are case-insensitive and camelCased ` +
`props need to use their kebab-case equivalents when using in-DOM ` +
`templates. You should probably use "${altKey}" instead of "${key}".`
)
}
}
checkProp(res, props, key, altKey, true) ||
checkProp(res, attrs, key, altKey, false)
}
}
return res
}
checkProp
/src/core/vdom/helpers/extract-props.js
/**
* 得到 res[key] = val
*/
function checkProp (
res: Object,
hash: ?Object,
key: string,
altKey: string,
preserve: boolean
): boolean {
if (isDef(hash)) {
// 判斷 hash（props/attrs）物件中是否存在 key 或 altKey
// 存在則設定給 res => res[key] = hash[key]
if (hasOwn(hash, key)) {
res[key] = hash[key]
if (!preserve) {
delete hash[key]
}
return true
} else if (hasOwn(hash, altKey)) {
res[key] = hash[altKey]
if (!preserve) {
delete hash[altKey]
}
return true
}
}
return false
}
createFunctionalComponent
/src/core/vdom/create-functional-component.js
installRenderHelpers(FunctionalRenderContext.prototype)
/**
* 執行函式式元件的 render 函式生成元件的 VNode，做了以下 3 件事：
* 1、設定元件的 props 物件
* 2、設定函式式元件的渲染上下文，傳遞給函式式元件的 render 函式
* 3、呼叫函式式元件的 render 函式生成 vnode
*
* @param {*} Ctor 元件的建構函式
* @param {*} propsData 額外的 props 物件
* @param {*} data 節點屬性組成的 JSON 字串
* @param {*} contextVm 上下文
* @param {*} children 子節點陣列
* @returns Vnode or Array<VNode>
*/
export function createFunctionalComponent (
Ctor: Class<Component>,
propsData: ?Object,
data: VNodeData,
contextVm: Component,
children: ?Array<VNode>
): VNode | Array<VNode> | void {
// 元件配置項
const options = Ctor.options
// 獲取 props 物件
const props = {}
// 元件本身的 props 選項
const propOptions = options.props
// 設定函式式元件的 props 物件
if (isDef(propOptions)) {
// 說明該函式式元件本身提供了 props 選項，則將 props.key 的值設定為元件上傳遞下來的對應 key 的值
for (const key in propOptions) {
props[key] = validateProp(key, propOptions, propsData || emptyObject)
}
} else {
// 當前函式式元件沒有提供 props 選項，則將元件上的 attribute 自動解析為 props
if (isDef(data.attrs)) mergeProps(props, data.attrs)
if (isDef(data.props)) mergeProps(props, data.props)
}
// 例項化函式式元件的渲染上下文
const renderContext = new FunctionalRenderContext(
data,
props,
children,
contextVm,
Ctor
)
// 呼叫 render 函式，生成 vnode，並給 render 函式傳遞 _c 和 渲染上下文
const vnode = options.render.call(null, renderContext._c, renderContext)
// 在最後生成的 VNode 物件上加一些標記，表示該 VNode 是一個函式式元件生成的，最後返回 VNode
if (vnode instanceof VNode) {
return cloneAndMarkFunctionalResult(vnode, data, renderContext.parent, options, renderContext)
} else if (Array.isArray(vnode)) {
const vnodes = normalizeChildren(vnode) || []
const res = new Array(vnodes.length)
for (let i = 0; i < vnodes.length; i++) {
res[i] = cloneAndMarkFunctionalResult(vnodes[i], data, renderContext.parent, options, renderContext)
}
return res
}
}
installComponentHooks
/src/core/vdom/create-component.js
const hooksToMerge = Object.keys(componentVNodeHooks)
/**
* 在元件的 data 物件上設定 hook 物件，
* hook 物件增加四個屬性，init、prepatch、insert、destroy，
* 負責元件的建立、更新、銷燬
*/
function installComponentHooks(data: VNodeData) {
const hooks = data.hook || (data.hook = {})
// 遍歷 hooksToMerge 陣列，hooksToMerge = ['init', 'prepatch', 'insert' 'destroy']
for (let i = 0; i < hooksToMerge.length; i++) {
// 比如 key = init
const key = hooksToMerge[i]
// 從 data.hook 物件中獲取 key 對應的方法
const existing = hooks[key]
// componentVNodeHooks 物件中 key 物件的方法
const toMerge = componentVNodeHooks[key]
// 合併使用者傳遞的 hook 方法和框架自帶的 hook 方法，其實就是分別執行兩個方法
if (existing !== toMerge && !(existing && existing._merged)) {
hooks[key] = existing ? mergeHook(toMerge, existing) : toMerge
}
}
}
function mergeHook(f1: any, f2: any): Function {
const merged = (a, b) => {
// flow complains about extra args which is why we use any
f1(a, b)
f2(a, b)
}
merged._merged = true
return merged
}
componentVNodeHooks
/src/core/vdom/create-component.js
// patch 期間在元件 vnode 上呼叫內聯鉤子
// inline hooks to be invoked on component VNodes during patch
const componentVNodeHooks = {
// 初始化
init(vnode: VNodeWithData, hydrating: boolean): ?boolean {
if (
vnode.componentInstance &&
!vnode.componentInstance._isDestroyed &&
vnode.data.keepAlive
) {
// 被 keep-alive 包裹的元件
// kept-alive components, treat as a patch
const mountedNode: any = vnode // work around flow
componentVNodeHooks.prepatch(mountedNode, mountedNode)
} else {
// 建立元件例項，即 new vnode.componentOptions.Ctor(options) => 得到 Vue 元件例項
const child = vnode.componentInstance = createComponentInstanceForVnode(
vnode,
activeInstance
)
// 執行元件的 $mount 方法，進入掛載階段，接下來就是通過編譯器得到 render 函式，接著走掛載、patch 這條路，直到元件渲染到頁面
child.$mount(hydrating ? vnode.elm : undefined, hydrating)
}
},
// 更新 VNode，用新的 VNode 配置更新舊的 VNode 上的各種屬性
prepatch(oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
// 新 VNode 的元件配置項
const options = vnode.componentOptions
// 老 VNode 的元件例項
const child = vnode.componentInstance = oldVnode.componentInstance
// 用 vnode 上的屬性更新 child 上的各種屬性
updateChildComponent(
child,
options.propsData, // updated props
options.listeners, // updated listeners
vnode, // new parent vnode
options.children // new children
)
},
// 執行元件的 mounted 宣告週期鉤子
insert(vnode: MountedComponentVNode) {
const { context, componentInstance } = vnode
// 如果元件未掛載，則呼叫 mounted 宣告週期鉤子
if (!componentInstance._isMounted) {
componentInstance._isMounted = true
callHook(componentInstance, 'mounted')
}
// 處理 keep-alive 元件的異常情況
if (vnode.data.keepAlive) {
if (context._isMounted) {
// vue-router#1212
// During updates, a kept-alive component's child components may
// change, so directly walking the tree here may call activated hooks
// on incorrect children. Instead we push them into a queue which will
// be processed after the whole patch process ended.
queueActivatedComponent(componentInstance)
} else {
activateChildComponent(componentInstance, true /* direct */)
}
}
},
/**
* 銷燬元件
* 1、如果元件被 keep-alive 元件包裹，則使元件失活，不銷燬元件例項，從而快取元件的狀態
* 2、如果元件沒有被 keep-alive 包裹，則直接呼叫例項的 $destroy 方法銷燬元件
*/
destroy (vnode: MountedComponentVNode) {
// 從 vnode 上獲取元件例項
const { componentInstance } = vnode
if (!componentInstance._isDestroyed) {
// 如果元件例項沒有被銷燬
if (!vnode.data.keepAlive) {
// 元件沒有被 keep-alive 元件包裹，則直接呼叫 $destroy 方法銷燬元件
componentInstance.$destroy()
} else {
// 負責讓元件失活，不銷燬元件例項，從而快取元件的狀態
deactivateChildComponent(componentInstance, true /* direct */)
}
}
}
}
createComponentInstanceForVnode
/src/core/vdom/create-component.js
/**
* new vnode.componentOptions.Ctor(options) => 得到 Vue 元件例項
*/
export function createComponentInstanceForVnode(
// we know it's MountedComponentVNode but flow doesn't
vnode: any,
// activeInstance in lifecycle state
parent: any
): Component {
const options: InternalComponentOptions = {
_isComponent: true,
_parentVnode: vnode,
parent
}
// 檢查內聯模版渲染函式
const inlineTemplate = vnode.data.inlineTemplate
if (isDef(inlineTemplate)) {
options.render = inlineTemplate.render
options.staticRenderFns = inlineTemplate.staticRenderFns
}
// new VueComponent(options) => Vue 例項
return new vnode.componentOptions.Ctor(options)
}
總結
面試官 問：一個元件是如何變成 VNode？
答：
-
元件例項初始化，最後執行 $mount 進入掛載階段
-
如果是隻包含執行時的 vue.js，只直接進入掛載階段，因為這時候的元件已經變成了渲染函式，編譯過程通過模組打包器 + vue-loader + vue-template-compiler 完成的
-
如果沒有使用預編譯，則必須使用全量的 vue.js
-
掛載時如果發現元件配置項上沒有 render 選項，則進入編譯階段
-
將模版字串編譯成 AST 語法樹，其實就是一個普通的 JS 物件
-
然後優化 AST，遍歷 AST 物件，標記每一個節點是否為靜態靜態；然後再進一步標記出靜態根節點，在元件後續更新時會跳過這些靜態節點的更新，以提高效能
-
接下來從 AST 生成渲染函式，生成的渲染函式有兩部分組成：
-
負責生成動態節點 VNode 的 render 函式
-
還有一個 staticRenderFns 陣列，裡面每一個元素都是一個生成靜態節點 VNode 的函式，這些函式會作為 render 函式的組成部分，負責生成靜態節點的 VNode
-
-
接下來將渲染函式放到元件的配置物件上，進入掛載階段，即執行 mountComponent 方法
-
最終負責渲染元件和更新元件的是一個叫 updateComponent 方法，該方法每次執行前首先需要執行 vm._render 函式，該函式負責執行編譯器生成的 render，得到元件的 VNode
-
將一個元件生成 VNode 的具體工作是由 render 函式中的
_c、_o、_l、_m等方法完成的，這些方法都被掛載到 Vue 例項上面，負責在執行時生成元件 VNode
提示：到這裡首先要明白什麼是 VNode，一句話描述就是 —— 元件模版的 JS 物件表現形式，它就是一個普通的 JS 物件，詳細描述了元件中各節點的資訊
下面說的有點多，其實記住一句就可以了，設定元件配置資訊，然後通過
new VNode(元件資訊)生成元件的 VNode
-
_c，負責生成元件或 HTML 元素的 VNode，_c 是所有 render helper 方法中最複雜，也是最核心的一個方法，其它的 _xx 都是它的組成部分
-
接收標籤、屬性 JSON 字串、子節點陣列、節點規範化型別作為引數
-
如果標籤是平臺保留標籤或者一個未知的元素，則直接
new VNode(標籤資訊)得到 VNode -
如果標籤是一個元件，則執行 createComponent 方法生成 VNode
-
函式式元件執行自己的 render 函式生成 VNode
-
普通元件則例項化一個 VNode，並且在在 data.hook 物件上設定 4 個方法，在元件的 patch 階段會被呼叫，從而進入子元件的例項化、掛載階段，然後進行編譯生成渲染函式，直至完成渲染
-
當然生成 VNode 之前會進行一些配置處理比如：
-
子元件選項合併，合併全域性配置項到元件配置項上
-
處理自定義元件的 v-model
-
處理元件的 props，提取元件的 props 資料，以元件的 props 配置中的屬性為 key，父元件中對應的資料為 value 生成一個 propsData 物件；當元件更新時生成新的 VNode，又會進行這一步，這就是 props 響應式的原理
-
處理其它資料，比如監聽器
-
安裝內建的 init、prepatch、insert、destroy 鉤子到 data.hooks 物件上，元件 patch 階段會用到這些鉤子方法
-
-
-
-
_l，執行時渲染 v-for 列表的幫助函式，迴圈遍歷 val 值，依次為每一項執行 render 方法生成 VNode，最終返回一個 VNode 陣列
-
_m，負責生成靜態節點的 VNode，即執行 staticRenderFns 陣列中指定下標的函式
簡單總結 render helper 的作用就是：在 Vue 例項上掛載一些執行時的工具方法，這些方法用在編譯器生成的渲染函式中，用於生成元件的 VNode。
好了，到這裡，一個元件從初始化開始到最終怎麼變成 VNode 就講完了，最後剩下的就是 patch 階段了，下一篇文章將講述如何將元件的 VNode 渲染到頁面上。
連結
- 配套視訊，微信公眾號回覆："精通 Vue 技術棧原始碼原理視訊版" 獲取
- 精通 Vue 技術棧原始碼原理 專欄
- github 倉庫 liyongning/Vue 歡迎 Star
感謝各位的：關注、點贊、收藏和評論，我們下期見。
當學習成為了習慣，知識也就變成了常識。 感謝各位的 關注、 點贊、收藏和評論。
新視訊和文章會第一時間在微信公眾號傳送，歡迎關注：李永寧lyn
文章已收錄到 github 倉庫 liyongning/blog，歡迎 Watch 和 Star。