Vue2.0源码理解(6) - 组件注册

组件注册

前言

在 Vue.js 中，除了它内置的组件如 keep-alive、component、transition、transition-group 等，其它用户自定义组件在使用前必须注册。在开发过程中可能会遇到如下报错信息：

 Unknown custom element: <app> - did you register the component correctly? 

For recursive components, make sure to provide the "name" option. 

一般报这个错的原因都是我们使用了未注册的组件。Vue.js 提供了 2 种组件的注册方式，全局注册和局部注册。接下来我们从源码分析的角度来分析这两种注册方式。

全局注册

在初始化加载阶段会调用initAssetRegisters函数把需要注册的组件挂载到Vue.options上。

 // src\core\global-api\index.js

initAssetRegisters(Vue) 

 // src\core\global-api\assets.js

export function initAssetRegisters (Vue: GlobalAPI) {

  // 标注①

  ASSET_TYPES.forEach(type => {

    Vue[type] = function (

      id: string,

      definition: Function | Object

    ): Function | Object | void {

      if (!definition) {

        return this.options[type + 's'][id]

      } else {

        /* istanbul ignore if */

        if (process.env.NODE_ENV !== 'production' && type === 'component') {

          validateComponentName(id)

        }

        if (type === 'component' && isPlainObject(definition)) {

          // 优先拿name，没有则取id

          definition.name = definition.name || id

          // 标注②

          definition = this.options._base.extend(definition)

        }

        if (type === 'directive' && typeof definition === 'function') {

          definition = { bind: definition, update: definition }

        }

        this.options[type + 's'][id] = definition

        return definition

      }

    }

  })

} 

标注①：
对ASSET_TYPES进行遍历，我们先看看遍历对象ASSET_TYPES是什么？

 // src\shared\constants.js

export const ASSET_TYPES = [

  'component',

  'directive',

  'filter'

] 

其实就是存放着插件、指令、过滤器这三个分类名称的数组,这里我们只单独针对component进行分析。
标注②：
this.options._base其实是Vue,具体原因请查看之前的文章《组件的创建和patch过程》。
通过Vue.extend把对象转换成构造器。
最后把definition放到this.options即Vue.options上，然后return definition。
虽然挂载到Vue.options上，但是又是什么时候会被拿去注册成真正的组件呢？
我们回顾_createElement函数：

 // src\core\vdom\create-element.js

export function _createElement (

  context: Component,

  tag?: string | Class<Component> | Function | Object,

  data?: VNodeData,

  children?: any,

  normalizationType?: number

): VNode | Array<VNode> {

    ...

    if (typeof tag === 'string') {

        //是否HTML原生标签

        if (config.isReservedTag(tag)) {

            ...

        // 标注①：resolveAsset

        } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {

            // component

            vnode = createComponent(Ctor, data, context, children, tag)

        } else {

            ...

        }

    }

} 

标注① ：resolveAsset函数做了什么？

 // src\core\util\options.js

export function resolveAsset (

  options: Object,

  type: string,

  id: string,

  warnMissing?: boolean

): any {

  /* istanbul ignore if */

  if (typeof id !== 'string') {

    return

  }

  const assets = options[type]

  //判断配置中是否存在该组件

  if (hasOwn(assets, id)) return assets[id]

  const camelizedId = camelize(id)

  //id转换成驼峰型判断

  if (hasOwn(assets, camelizedId)) return assets[camelizedId]

  const PascalCaseId = capitalize(camelizedId)

  //id转换成首字母大写判断

  if (hasOwn(assets, PascalCaseId)) return assets[PascalCaseId]

  // fallback to prototype chain

//   原型上面找

  const res = assets[id] || assets[camelizedId] || assets[PascalCaseId]

  if (process.env.NODE_ENV !== 'production' && warnMissing && !res) {

    warn(

      'Failed to resolve ' + type.slice(0, -1) + ': ' + id,

      options

    )

  }

  //返回构造器

  return res

} 

其实就是经过各种情况判断识别Vue.options是否有定义该组件，有的话则返回，然后最后经过createComponent函数进行了组件的注册。关于createComponent函数的不了解的请查阅之前文章《组件的创建和patch过程》
局部注册其实和全局注册的几乎一样，只是它需要在此前做一个option合并：

 // src\core\global-api\extend.js

Sub.options = mergeOptions(

  Super.options,

  extendOptions

) 

关于合并的详细分析请查阅之前文章《合并配置》
由于合并配置是挂载于Sub上的，也就是说它只是一个在当前Sub作用域下的，一次这种创建方式的组件只能局部使用。

异步组件注册

工程模式

平时开发，特别涉及到首屏加载的时候，一次性加载完成会对首屏体验变成，所以往往加了各种异步加载，组件注册当然也支持异步注册，下面我们看看源码是怎么实现。
我们先在main.js写一个注册一个异步组件

 Vue.component('HelloWorld',function(resolve,reject){

  require(['./components/HelloWorld'],function(res){

    resolve(res);

  })

}) 

还是回到最初的方法initAssetRegisters(Vue)

 // src\core\global-api\assets.js

export function initAssetRegisters (Vue: GlobalAPI) {

  ASSET_TYPES.forEach(type => {

    Vue[type] = function (

      id: string,

      definition: Function | Object

    ): Function | Object | void {

      if (!definition) {

        return this.options[type + 's'][id]

      } else {

        /* istanbul ignore if */

        if (process.env.NODE_ENV !== 'production' && type === 'component') {

          validateComponentName(id)

        }

        if (type === 'component' && isPlainObject(definition)) {

          // 优先拿name，没有则取id

          definition.name = definition.name || id

          definition = this.options._base.extend(definition)

        }

        if (type === 'directive' && typeof definition === 'function') {

          definition = { bind: definition, update: definition }

        }

        this.options[type + 's'][id] = definition

        return definition

      }

    }

  })

} 

其实在这个函数里只是把方法挂载到options上，那么在哪里处理异步呢？我们回看创建组件方法

 // src\core\vdom\create-component.js

export function createComponent (

  Ctor: Class<Component> | Function | Object | void,

  data: ?VNodeData,

  context: Component,

  children: ?Array<VNode>,

  tag?: string

): VNode | Array<VNode> | void {

  ...

  // async component

  let asyncFactory

  if (isUndef(Ctor.cid)) {  //因为是方法，所以没有id

    asyncFactory = Ctor

    Ctor = resolveAsyncComponent(asyncFactory, baseCtor, context)

    if (Ctor === undefined) {

      // return a placeholder node for async component, which is rendered

      // as a comment node but preserves all the raw information for the node.

      // the information will be used for async server-rendering and hydration.

      return createAsyncPlaceholder(

        asyncFactory,

        data,

        context,

        children,

        tag

      )

    }

  } 

因为我们异步注册传进的是一个方法，所以是没有cid的，所以就到了判断里面逻辑。这里面我们分两步分析，分别是resolveAsyncComponent方法和createAsyncPlaceholder方法。

①、resolveAsyncComponent方法

 // src\core\vdom\helpers\resolve-async-component.js

export function resolveAsyncComponent (

  factory: Function,

  baseCtor: Class<Component>,

  context: Component

): Class<Component> | void {

  ...

    const resolve = once((res: Object | Class<Component>) => {

      // cache resolved

      factory.resolved = ensureCtor(res, baseCtor)

      // invoke callbacks only if this is not a synchronous resolve

      // (async resolves are shimmed as synchronous during SSR)

      if (!sync) {

        forceRender(true)

      }

    })



    const reject = once(reason => {

      process.env.NODE_ENV !== 'production' && warn(

        `Failed to resolve async component: ${String(factory)}` +

        (reason ? `\nReason: ${reason}` : '')

      )

      if (isDef(factory.errorComp)) {

        factory.error = true

        forceRender(true)

      }

    })

    //调用函数

    const res = factory(resolve, reject)

    // 异步，因此res为undefined

    if (isObject(res)) {

      ...

    }

  ...

    sync = false

    // return in case resolved synchronously

    return factory.loading

      ? factory.loadingComp

      : factory.resolved

  }

} 

第一次进来主要处理了两件事：
1、定义了resolve和reject方法用于回调。
2、执行了组件注册时参入的方法。
最后return时候factory.loading是undefined的，因此回到createComponent时进入createAsyncPlaceholder方法

②、createAsyncPlaceholder方法

 // src\core\vdom\helpers\resolve-async-component.js

export function createAsyncPlaceholder (

  factory: Function,

  data: ?VNodeData,

  context: Component,

  children: ?Array<VNode>,

  tag: ?string

): VNode {

  const node = createEmptyVNode()

  node.asyncFactory = factory

  node.asyncMeta = { data, context, children, tag }

  return node

} 

createAsyncPlaceholder方法其实就是创建一个空的注释节点。
至此同步线程结束，回到了组件注册时，我们定义的方法。

 Vue.component('HelloWorld',function(resolve,reject){

  require(['./components/HelloWorld'],function(res){

    //同步线程结束，调用resolve方法。

    resolve(res);

  })

}) 

res参数指向的就是组件的本身。
然后我们回看resolve方法：

 // src\core\vdom\helpers\resolve-async-component.js

const resolve = once((res: Object | Class<Component>) => {

  // cache resolved

  factory.resolved = ensureCtor(res, baseCtor)

  // invoke callbacks only if this is not a synchronous resolve

  // (async resolves are shimmed as synchronous during SSR)

  if (!sync) {

    forceRender(true)

  }

}) 

其中ensureCtor方法主要是利用Vue.extend做构造器转换，执行后挂载到我们定义的方法下，factory.resolved在后面重新强制渲染会用来做判断，然后执行下一步，进入forceRender方法。

 // src\core\vdom\helpers\resolve-async-component.js

const forceRender = (renderCompleted: boolean) => {

  for (let i = 0, l = contexts.length; i < l; i++) {

    contexts[i].$forceUpdate()

  }



  if (renderCompleted) {

    contexts.length = 0

  }

} 

forceRender方法主要是调用$forceUpdate()触发一次强制渲染。
这次我们又回到最初的起点，呆呆的。。。。
来，我们继续看resolveAsyncComponent老友:

 // src\core\vdom\helpers\resolve-async-component.js

export function resolveAsyncComponent (

  factory: Function,

  baseCtor: Class<Component>,

  context: Component

): Class<Component> | void {

  ...

  if (isDef(factory.resolved)) {

    return factory.resolved

  }

}) 

这次factory.resolved是有的了，然后就返回factory.resolved构造器。

 // src\core\vdom\create-component.js

export function createComponent (

  Ctor: Class<Component> | Function | Object | void,

  data: ?VNodeData,

  context: Component,

  children: ?Array<VNode>,

  tag?: string

): VNode | Array<VNode> | void {

  ...

  // async component

  let asyncFactory

  if (isUndef(Ctor.cid)) {  //因为是方法，所以没有id

    asyncFactory = Ctor

    Ctor = resolveAsyncComponent(asyncFactory, baseCtor, context)

    if (Ctor === undefined) {

      // return a placeholder node for async component, which is rendered

      // as a comment node but preserves all the raw information for the node.

      // the information will be used for async server-rendering and hydration.

      return createAsyncPlaceholder(

        asyncFactory,

        data,

        context,

        children,

        tag

      )

    }

  } 

返回构造器后createAsyncPlaceholder方法就不再去跑了，然后会正常进入patch阶段把组件注册。

promise模式

 // import会返回一个promise对象

Vue.component('HelloWorld',

    () => import('./components/HelloWorld')

) 

和工厂模式殊途同归，还是去到了resolveAsyncComponent方法

 // src\core\vdom\helpers\resolve-async-component.js

export function resolveAsyncComponent (

  factory: Function,

  baseCtor: Class<Component>,

  context: Component

): Class<Component> | void {

  ...

  //这时候返回的是promise对象

  const res = factory(resolve, reject)



  if (isObject(res)) {

    // 此处调用promise对象的then方法

    if (typeof res.then === 'function') {

      // () => Promise

      if (isUndef(factory.resolved)) {

        res.then(resolve, reject)

      }

    } 

    ...

  }

}) 

和工厂模式不一样的是factory执行后会返回一个promise对象，从而进入到判断逻辑，然后使用promise的then方法从而进行到异步调用注册组件。

高级模式

 const LoadingComp = {

  template:"<div>LoadingComp</div>"

}



const ErrorComp = {

  template:"<div>ErrorComp</div>"

}



const AsyncComp = {

  // 需要加载的组件，应当是一个promise对象

  component: import('./components/HelloWorld.vue'),

  //加载中应当渲染的组件

  loading:LoadingComp,

  // 出错时渲染的组件

  error:ErrorComp,

  // 渲染加载中组件前的等待时长

  delay:200,

  // 最长等待时长,超时渲染报错组件

  timeout:3000,

}



Vue.component('HelloWorld',AsyncComp); 

高级模式就不再分析了,走的还是resolveAsyncComponent方法,有兴趣的可以自行研究一下,总体流程差不多.

组件注册就说到这了,后面我们会探讨响应式的原理。