1 介紹

       版本：2.5.17。 

       我們使用vue-vli建立基於Runtime+Compiler的vue腳手架。

       學習文件：https://ustbhuangyi.github.io/vue-analysis/components/component-register.html

2 元件註冊

在 Vue.js 中，除了它內建的元件如 keep-alive

'Unknown custom element: <xxx> - did you register the component correctly?
 For recursive components, make sure to provide the "name" option.'

Vue.js 提供了 2 種元件的註冊方式，全域性註冊和區域性註冊

2.1 全域性註冊

使用Vue.components

Vue.component('my-component', {
  // 選項
})

 2.1.1 Vue.component

Vue.components函式定義過程發生在最開始初始化 Vue 的全域性函式的時候，程式碼在 src/core/global-api/assets.js 中：

export function initAssetRegisters (Vue: GlobalAPI) {
  /**
   * Create asset registration methods.
   */
  ASSET_TYPES.forEach(type => {
    Vue[type] = function (
      id: string,  // id是字串
      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)) {
          definition.name = definition.name || id
          // 通過this.options._base.extend方法將定義物件轉化為構造器，也就是Vue.extend方法
          definition = this.options._base.extend(definition)
        }
        if (type === 'directive' && typeof definition === 'function') {
          definition = { bind: definition, update: definition }
        }
        // 將構造器賦值給 this.options[‘component’+ 's'][id]
        this.options[type + 's'][id] = definition
        return definition
      }
    }
  })
}
 

 函式首先遍歷 ASSET_TYPES，得到 type 後掛載到 Vue 上 。ASSET_TYPES 的定義在 src/shared/constants.js 中：

export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]

 實際上 Vue 是初始化了 3 個全域性函式，並且如果 type 是 component 且 definition 是一個物件的話，通過 this.opitons._base.extend， 相當於 Vue.extend 把這個物件轉換成一個繼承於 Vue 的建構函式，最後通過 this.options[type + 's'][id] = definition 把它掛載到 Vue.options.components上。

由於我們每個元件的建立都是通過 Vue.extend 繼承而來，我們之前分析過在繼承的過程中有這麼一段邏輯：

export function _createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array<VNode> {
  // ...
  let vnode, ns
  // 如果tag是一個string
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    // 如果tag是一個保留標籤也就是HTML標籤的話
    if (config.isReservedTag(tag)) {
      // 建立一個普通VNode
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
       // 否知如果滿足這個條件，就建立元件VNode，判斷的時候回撥用resolveAsset方法
    } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {

      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    vnode = createComponent(tag, data, context, children)
  }
  // ...
}

 這裡有一個判斷邏輯 isDef(Ctor = resolveAsset(context.$options, 'components', tag))，先來看一下 resolveAsset 的定義，在 src/core/utils/options.js 中：

/**
 * Resolve an asset.
 * This function is used because child instances need access
 * to assets defined in its ancestor chain.
 */
export function resolveAsset (
  options: Object, // vm.$options,上買說了，因為options的合併，元件definitions構造器可以通過vm.$options訪問
  type: string,
  id: string,
  warnMissing?: boolean
): any {
  /* istanbul ignore if */
  if (typeof id !== 'string') {
    return
  }
  const assets = options[type] // 其實就是元件definitions構造器
  // 
  // check local registration variations first
  if (hasOwn(assets, id)) return assets[id]
  const camelizedId = camelize(id)
  if (hasOwn(assets, camelizedId)) return assets[camelizedId]
  const PascalCaseId = capitalize(camelizedId)
  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
}

這段邏輯很簡單，先通過 const assets = options[type] 拿到 assets其實就是元件definitions構造器，然後再嘗試拿 assets[id]，這裡有個順序，先直接使用 id 拿，如果不存在，則把 id 變成駝峰的形式再拿，如果仍然不存在則在駝峰的基礎上把首字母再變成大寫的形式再拿，如果仍然拿不到則報錯。 
這樣說明了我們在使用 Vue.component(id, definition) 全域性註冊元件的時候，id 可以是連字元、駝峰或首字母大寫的形式。

那麼回到我們的呼叫 resolveAsset(context.$options, 'components', tag)，即拿 vm.$options.components[tag]，這樣我們就可以在 resolveAsset 的時候拿到這個元件的建構函式，並作為 createComponent 的鉤子的引數,建立元件VNode

2.1.2總結

• 通過assets.js，將元件的definition定義物件通過 this.opitons._base.extend， 相當於 Vue.extend 將其轉換成一個繼承於 Vue 的建構函式， 並this.options[type + 's'][id] =definition掛載到 Vue.options.components 上。
• 元件的建立都是通過 Vue.extend 繼承，進而通過mergeOptions，使得每一個元件都擁有了options.components
• 在建立 vnode 的過程中，會執行 _createElement 方法，在該方法中利用resolveAsset判斷該元件有沒有vm.options.components對應的元件的definition定義
• 如果有元件的definition定義，就會建立元件VNode

2.2 區域性註冊

Vue.js 也同樣支援區域性註冊，我們可以在一個元件內部使用 components 選項做元件的區域性註冊，例如：

import HelloWorld from './components/HelloWorld'

export default {
  components: {
    HelloWorld
  }
}

其實是在構造子元件的構造器Sub的時候將 Super.options和 extendOptions做了一次合併。extendOptions就是我們定義元件的物件,對於上面的程式碼，對應的就是

export default {
  components: {
    HelloWorld
  }
}

在初始化的階段src/core/instance/init.js中執行

export function initInternalComponent (vm: Component, options: InternalComponentOptions) {
    const opts = vm.$options = Object.create(vm.constructor.options)
}

vm.$options 就可以拿到Sub.options 配置。所以就可以vm.$options.components 拿到子元件，接著走建立VNode的函式，這樣我們就可以在 resolveAsset 的時候拿到這個元件的建構函式，並作為 createComponent 的鉤子的引數。,建立元件VNode

2.2.1總結

• 元件的建立都是通過 Vue.extend 繼承，Super.options和 extendOptions做了一次合併，使得該元件有了 extendOptions的options.components 
• 在建立 vnode 的過程中，會執行 _createElement 
• 方法，在該方法中利用resolveAsset判斷該元件有沒有vm.options.components對應的元件的definition定義 
• 如果有元件的definition定義，就會建立元件VNode 

3 總結

區域性註冊和全域性註冊不同的是，只有該型別的元件才可以訪問區域性註冊的子元件，而全域性註冊是擴充套件到 Vue.options 下，所以在所有元件建立的過程中，都會從全域性的 Vue.options.components 擴充套件到當前元件的 vm.$options.components 下，這就是全域性註冊的元件能被任意使用的原因。