• createComponent
    • 构造子类构造函数
    • 安装组件钩子函数
    • 实例化 VNode
    • 总结

    createComponent

    上一章我们在分析 createElement 的实现的时候，它最终会调用 _createElement 方法，其中有一段逻辑是对参数 tag 的判断，如果是一个普通的 html 标签，像上一章的例子那样是一个普通的 div，则会实例化一个普通 VNode 节点，否则通过 createComponent 方法创建一个组件 VNode。

    1. if (typeof tag === 'string') {
    2.   let Ctor
    3.   ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    4.   if (config.isReservedTag(tag)) {
    5.     // platform built-in elements
    6.     vnode = new VNode(
    7.       config.parsePlatformTagName(tag), data, children,
    8.       undefined, undefined, context
    9.     )
    10.   } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
    11.     // component
    12.     vnode = createComponent(Ctor, data, context, children, tag)
    13.   } else {
    14.     // unknown or unlisted namespaced elements
    15.     // check at runtime because it may get assigned a namespace when its
    16.     // parent normalizes children
    17.     vnode = new VNode(
    18.       tag, data, children,
    19.       undefined, undefined, context
    20.     )
    21.   }
    22. } else {
    23.   // direct component options / constructor
    24.   vnode = createComponent(tag, data, context, children)
    25. }

    在我们这一章传入的是一个 App 对象，它本质上是一个 Component 类型，那么它会走到上述代码的 else 逻辑，直接通过 createComponent 方法来创建 vnode。所以接下来我们来看一下 createComponent 方法的实现，它定义在 src/core/vdom/create-component.js 文件中：

    1. export function createComponent (
    2.   Ctor: Class<Component> | Function | Object | void,
    3.   data: ?VNodeData,
    4.   context: Component,
    5.   children: ?Array<VNode>,
    6.   tag?: string
    7. ): VNode | Array<VNode> | void {
    8.   if (isUndef(Ctor)) {
    9.     return
    10.   }
    12.   const baseCtor = context.$options._base
    14.   // plain options object: turn it into a constructor
    15.   if (isObject(Ctor)) {
    16.     Ctor = baseCtor.extend(Ctor)
    17.   }
    19.   // if at this stage it's not a constructor or an async component factory,
    20.   // reject.
    21.   if (typeof Ctor !== 'function') {
    22.     if (process.env.NODE_ENV !== 'production') {
    23.       warn(`Invalid Component definition: ${String(Ctor)}`, context)
    24.     }
    25.     return
    26.   }
    28.   // async component
    29.   let asyncFactory
    30.   if (isUndef(Ctor.cid)) {
    31.     asyncFactory = Ctor
    32.     Ctor = resolveAsyncComponent(asyncFactory, baseCtor, context)
    33.     if (Ctor === undefined) {
    34.       // return a placeholder node for async component, which is rendered
    35.       // as a comment node but preserves all the raw information for the node.
    36.       // the information will be used for async server-rendering and hydration.
    37.       return createAsyncPlaceholder(
    38.         asyncFactory,
    39.         data,
    40.         context,
    41.         children,
    42.         tag
    43.       )
    44.     }
    45.   }
    47.   data = data || {}
    49.   // resolve constructor options in case global mixins are applied after
    50.   // component constructor creation
    51.   resolveConstructorOptions(Ctor)
    53.   // transform component v-model data into props & events
    54.   if (isDef(data.model)) {
    55.     transformModel(Ctor.options, data)
    56.   }
    58.   // extract props
    59.   const propsData = extractPropsFromVNodeData(data, Ctor, tag)
    61.   // functional component
    62.   if (isTrue(Ctor.options.functional)) {
    63.     return createFunctionalComponent(Ctor, propsData, data, context, children)
    64.   }
    66.   // extract listeners, since these needs to be treated as
    67.   // child component listeners instead of DOM listeners
    68.   const listeners = data.on
    69.   // replace with listeners with .native modifier
    70.   // so it gets processed during parent component patch.
    71.   data.on = data.nativeOn
    73.   if (isTrue(Ctor.options.abstract)) {
    74.     // abstract components do not keep anything
    75.     // other than props & listeners & slot
    77.     // work around flow
    78.     const slot = data.slot
    79.     data = {}
    80.     if (slot) {
    81.       data.slot = slot
    82.     }
    83.   }
    85.   // install component management hooks onto the placeholder node
    86.   installComponentHooks(data)
    88.   // return a placeholder vnode
    89.   const name = Ctor.options.name || tag
    90.   const vnode = new VNode(
    91.     `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
    92.     data, undefined, undefined, undefined, context,
    93.     { Ctor, propsData, listeners, tag, children },
    94.     asyncFactory
    95.   )
    97.   // Weex specific: invoke recycle-list optimized @render function for
    98.   // extracting cell-slot template.
    99.   // https://github.com/Hanks10100/weex-native-directive/tree/master/component
    100.   /* istanbul ignore if */
    101.   if (__WEEX__ && isRecyclableComponent(vnode)) {
    102.     return renderRecyclableComponentTemplate(vnode)
    103.   }
    105.   return vnode
    106. }

    可以看到，createComponent 的逻辑也会有一些复杂，但是分析源码比较推荐的是只分析核心流程，分支流程可以之后针对性的看，所以这里针对组件渲染这个 case 主要就 3 个关键步骤：

    构造子类构造函数，安装组件钩子函数和实例化 vnode。

    构造子类构造函数

    1. const baseCtor = context.$options._base
    3. // plain options object: turn it into a constructor
    4. if (isObject(Ctor)) {
    5. Ctor = baseCtor.extend(Ctor)
    6. }

    我们在编写一个组件的时候，通常都是创建一个普通对象，还是以我们的 App.vue 为例，代码如下：

    1. import HelloWorld from './components/HelloWorld'
    3. export default {
    4.   name: 'app',
    5.   components: {
    6.     HelloWorld
    7.   }
    8. }

    这里 export 的是一个对象，所以 createComponent 里的代码逻辑会执行到 baseCtor.extend(Ctor)，在这里 baseCtor 实际上就是 Vue，这个的定义是在最开始初始化 Vue 的阶段，在 src/core/global-api/index.js 中的 initGlobalAPI 函数有这么一段逻辑：

    1. // this is used to identify the "base" constructor to extend all plain-object
    2. // components with in Weex's multi-instance scenarios.
    3. Vue.options._base = Vue

    细心的同学会发现，这里定义的是 Vue.option，而我们的 createComponent 取的是 context.$options，实际上在 src/core/instance/init.js 里 Vue 原型上的 _init 函数中有这么一段逻辑：

    1. vm.$options = mergeOptions(
    2.   resolveConstructorOptions(vm.constructor),
    3.   options || {},
    4.   vm
    5. )

    这样就把 Vue 上的一些 option 扩展到了 vm.$option 上，所以我们也就能通过 vm.$options._base 拿到 Vue 这个构造函数了。mergeOptions 的实现我们会在后续章节中具体分析，现在只需要理解它的功能是把 Vue 构造函数的 options 和用户传入的 options 做一层合并，到 vm.$options 上。

    在了解了 baseCtor 指向了 Vue 之后，我们来看一下 Vue.extend 函数的定义，在 src/core/global-api/extend.js 中。

    1. /**
    2.  * Class inheritance
    3.  */
    4. Vue.extend = function (extendOptions: Object): Function {
    5.   extendOptions = extendOptions || {}
    6.   const Super = this
    7.   const SuperId = Super.cid
    8.   const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
    9.   if (cachedCtors[SuperId]) {
    10.     return cachedCtors[SuperId]
    11.   }
    13.   const name = extendOptions.name || Super.options.name
    14.   if (process.env.NODE_ENV !== 'production' && name) {
    15.     validateComponentName(name)
    16.   }
    18.   const Sub = function VueComponent (options) {
    19.     this._init(options)
    20.   }
    21.   Sub.prototype = Object.create(Super.prototype)
    22.   Sub.prototype.constructor = Sub
    23.   Sub.cid = cid++
    24.   Sub.options = mergeOptions(
    25.     Super.options,
    26.     extendOptions
    27.   )
    28.   Sub['super'] = Super
    30.   // For props and computed properties, we define the proxy getters on
    31.   // the Vue instances at extension time, on the extended prototype. This
    32.   // avoids Object.defineProperty calls for each instance created.
    33.   if (Sub.options.props) {
    34.     initProps(Sub)
    35.   }
    36.   if (Sub.options.computed) {
    37.     initComputed(Sub)
    38.   }
    40.   // allow further extension/mixin/plugin usage
    41.   Sub.extend = Super.extend
    42.   Sub.mixin = Super.mixin
    43.   Sub.use = Super.use
    45.   // create asset registers, so extended classes
    46.   // can have their private assets too.
    47.   ASSET_TYPES.forEach(function (type) {
    48.     Sub[type] = Super[type]
    49.   })
    50.   // enable recursive self-lookup
    51.   if (name) {
    52.     Sub.options.components[name] = Sub
    53.   }
    55.   // keep a reference to the super options at extension time.
    56.   // later at instantiation we can check if Super's options have
    57.   // been updated.
    58.   Sub.superOptions = Super.options
    59.   Sub.extendOptions = extendOptions
    60.   Sub.sealedOptions = extend({}, Sub.options)
    62.   // cache constructor
    63.   cachedCtors[SuperId] = Sub
    64.   return Sub
    65. }

    Vue.extend 的作用就是构造一个 Vue 的子类，它使用一种非常经典的原型继承的方式把一个纯对象转换一个继承于 Vue 的构造器 Sub 并返回，然后对 Sub 这个对象本身扩展了一些属性，如扩展 options、添加全局 API 等；并且对配置中的 props 和 computed 做了初始化工作；最后对于这个 Sub 构造函数做了缓存，避免多次执行 Vue.extend 的时候对同一个子组件重复构造。

    这样当我们去实例化 Sub 的时候，就会执行 this._init 逻辑再次走到了 Vue 实例的初始化逻辑，实例化子组件的逻辑在之后的章节会介绍。

    1. const Sub = function VueComponent (options) {
    2.   this._init(options)
    3. }

    安装组件钩子函数

    1. // install component management hooks onto the placeholder node
    2. installComponentHooks(data)

    我们之前提到 Vue.js 使用的 Virtual DOM 参考的是开源库 snabbdom，它的一个特点是在 VNode 的 patch 流程中对外暴露了各种时机的钩子函数，方便我们做一些额外的事情，Vue.js 也是充分利用这一点，在初始化一个 Component 类型的 VNode 的过程中实现了几个钩子函数：

    1. const componentVNodeHooks = {
    2.   init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
    3.     if (
    4.       vnode.componentInstance &&
    5.       !vnode.componentInstance._isDestroyed &&
    6.       vnode.data.keepAlive
    7.     ) {
    8.       // kept-alive components, treat as a patch
    9.       const mountedNode: any = vnode // work around flow
    10.       componentVNodeHooks.prepatch(mountedNode, mountedNode)
    11.     } else {
    12.       const child = vnode.componentInstance = createComponentInstanceForVnode(
    13.         vnode,
    14.         activeInstance
    15.       )
    16.       child.$mount(hydrating ? vnode.elm : undefined, hydrating)
    17.     }
    18.   },
    20.   prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
    21.     const options = vnode.componentOptions
    22.     const child = vnode.componentInstance = oldVnode.componentInstance
    23.     updateChildComponent(
    24.       child,
    25.       options.propsData, // updated props
    26.       options.listeners, // updated listeners
    27.       vnode, // new parent vnode
    28.       options.children // new children
    29.     )
    30.   },
    32.   insert (vnode: MountedComponentVNode) {
    33.     const { context, componentInstance } = vnode
    34.     if (!componentInstance._isMounted) {
    35.       componentInstance._isMounted = true
    36.       callHook(componentInstance, 'mounted')
    37.     }
    38.     if (vnode.data.keepAlive) {
    39.       if (context._isMounted) {
    40.         // vue-router#1212
    41.         // During updates, a kept-alive component's child components may
    42.         // change, so directly walking the tree here may call activated hooks
    43.         // on incorrect children. Instead we push them into a queue which will
    44.         // be processed after the whole patch process ended.
    45.         queueActivatedComponent(componentInstance)
    46.       } else {
    47.         activateChildComponent(componentInstance, true /* direct */)
    48.       }
    49.     }
    50.   },
    52.   destroy (vnode: MountedComponentVNode) {
    53.     const { componentInstance } = vnode
    54.     if (!componentInstance._isDestroyed) {
    55.       if (!vnode.data.keepAlive) {
    56.         componentInstance.$destroy()
    57.       } else {
    58.         deactivateChildComponent(componentInstance, true /* direct */)
    59.       }
    60.     }
    61.   }
    62. }
    64. const hooksToMerge = Object.keys(componentVNodeHooks)
    66. function installComponentHooks (data: VNodeData) {
    67.   const hooks = data.hook || (data.hook = {})
    68.   for (let i = 0; i < hooksToMerge.length; i++) {
    69.     const key = hooksToMerge[i]
    70.     const existing = hooks[key]
    71.     const toMerge = componentVNodeHooks[key]
    72.     if (existing !== toMerge && !(existing && existing._merged)) {
    73.       hooks[key] = existing ? mergeHook(toMerge, existing) : toMerge
    74.     }
    75.   }
    76. }
    78. function mergeHook (f1: any, f2: any): Function {
    79.   const merged = (a, b) => {
    80.     // flow complains about extra args which is why we use any
    81.     f1(a, b)
    82.     f2(a, b)
    83.   }
    84.   merged._merged = true
    85.   return merged
    86. }

    整个 installComponentHooks 的过程就是把 componentVNodeHooks 的钩子函数合并到 data.hook 中，在 VNode 执行 patch 的过程中执行相关的钩子函数，具体的执行我们稍后在介绍 patch 过程中会详细介绍。这里要注意的是合并策略，在合并过程中，如果某个时机的钩子已经存在 data.hook 中，那么通过执行 mergeHook 函数做合并，这个逻辑很简单，就是在最终执行的时候，依次执行这两个钩子函数即可。

    实例化 VNode

    1. const name = Ctor.options.name || tag
    2. const vnode = new VNode(
    3. `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
    4. data, undefined, undefined, undefined, context,
    5. { Ctor, propsData, listeners, tag, children },
    6. asyncFactory
    7. )
    8. return vnode

    最后一步非常简单，通过 new VNode 实例化一个 vnode 并返回。需要注意的是和普通元素节点的 vnode 不同，组件的 vnode 是没有 children 的，这点很关键，在之后的 patch 过程中我们会再提。

    总结

    这一节我们分析了 createComponent 的实现，了解到它在渲染一个组件的时候的 3 个关键逻辑：构造子类构造函数，安装组件钩子函数和实例化 vnode。createComponent 后返回的是组件 vnode，它也一样走到 vm._update 方法，进而执行了 patch 函数，我们在上一章对 patch 函数做了简单的分析，那么下一节我们会对它做进一步的分析。

    原文: https://ustbhuangyi.github.io/vue-analysis/components/create-component.html