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