04-Vue中的資源全局註冊函數

在Vue源碼中有三個類型被稱爲資源(asset)，爲什麼這麼叫我就不知道了。這三個是component、filter和directive。在shared/constants.js中有一個常量數組ASSET_TYPES，就是這三個東西。Vue提供了這三個的全局註冊函數，掛載了Vue上，Vue.component、Vue.filter和Vue.directive，分別用來你全局註冊組件、過濾器和指令。

現在要談的是全局註冊函數core/global-api/assets.js

下面代碼就是在Vue上添加這三個全局註冊函數的。全局註冊函數集get和set於一身。指令directive和過濾器filter的註冊都是簡單的，在directive註冊過程中還做了一下標準化，把所有directive都轉換成了對象形式。最複雜的是component的註冊。最終又導向了Vue.extend，參考這裏

ASSET_TYPES.forEach(type => {
    Vue[type] = function (
      id: string,
      definition: Function | Object
    ): Function | Object | void {
      // 只有一個參數，get
      if (!definition) {
        return this.options[type + 's'][id]
      } else {
        /* istanbul ignore if */
        // 非生產環境下，驗證一下組件名的有效性
        if (process.env.NODE_ENV !== 'production' && type === 'component') {
          validateComponentName(id)
        }
        // 組件的註冊最複雜了
        // 需要把傳進來的組件options即definition轉換成組件類，這個組件類都是
        // 繼承Vue的，具體過程在extend方法中。這個_base就是Vue自己
        if (type === 'component' && isPlainObject(definition)) {
          definition.name = definition.name || id
          definition = this.options._base.extend(definition)
        }
        // 指令標準化，保證最後存在directives中的都是對象格式
        if (type === 'directive' && typeof definition === 'function') {
          definition = { bind: definition, update: definition }
        }
        // set
        this.options[type + 's'][id] = definition
        return definition
      }
    }
  })

有用請點贊，嘻嘻:)