前言

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