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函式進行了組件的注冊，

區域注冊

區域注冊其實和全域注冊的幾乎一樣，只是它需要在此前做一個option合并：

// src\core\global-api\extend.js
Sub.options = mergeOptions(
  Super.options,
  extendOptions
)

關于合并的詳細分析請查閱之前文章《合并配置》
由于合并配置是掛載于Sub上的，也就是說它只是一個在當前Sub作用域下的，一次這種創建方式的組件只能區域使用，

標籤：其他

上一篇：react 也就這么回事 01 —— React 元素的創建和渲染

下一篇：CSS