前言

上一篇文章 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。

總結

以上是生活随笔為你收集整理的Vue 源码解读（11）—— render helper的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。