Vue.options.components VS Vue.component

var ASSET_TYPES = [
  'component',
  'directive',
  'filter'
];

function initGlobalAPI (Vue) {
......
  Vue.options = Object.create(null);
  ASSET_TYPES.forEach(function (type) {
    Vue.options[type + 's'] = Object.create(null);
  });

  // this is used to identify the "base" constructor to extend all plain-object
  // components with in Weex's multi-instance scenarios.
  Vue.options._base = Vue;

  extend(Vue.options.components, builtInComponents);

  ......
  initAssetRegisters(Vue);
}

下面来查看initAssetRegisters函数

function initAssetRegisters (Vue) {
  /**
   * Create asset registration methods.
   */
  ASSET_TYPES.forEach(function (type) {
    Vue[type] = function (
      id,
      definition
    ) {
        ......
        this.options[type + 's'][id] = definition;
        return definition
      }
    };
  });
}

上面可以了解到Vue[type] 中的type即为 'component', 'directive', 'filter',也就是我们平时用到的自定义组件Vue.component函数就是用这个函数定义实现的

this.options[type + 's'][id] = definition;
这个说明Vue.opitons.components下我们可以查到所有的有Vue.component自定义的组件

Vue.options

{
components: {KeepAlive: {…}, Transition: {…}, TransitionGroup: {…}, ElPagination: ƒ, ElDialog: ƒ, …}
directives: {model: {…}, show: {…}, popover: {…}, InfiniteScroll: {…}, loading: {…}}
filters: {}
}

Vue.options.components

这里我们可以看到用Vue.use(ElementUi)加载的所有自定义组件

Vue.use数据流实现 点击查看（https://www.jianshu.com/p/2b959d1c9b45）

{
ElAlert: ƒ VueComponent(options)
ElAside: ƒ VueComponent(options)
ElAutocomplete: ƒ VueComponent(options)
ElAvatar: ƒ VueComponent(options)
ElBacktop: ƒ VueComponent(options)
......
KeepAlive: {name: "keep-alive", abstract: true, props: {…}, created: ƒ, destroyed: ƒ, …}
Transition: {name: "transition", props: {…}, abstract: true, render: ƒ}
TransitionGroup: {props: {…}, methods: {…}, beforeMount: ƒ, render: ƒ, updated: ƒ}
}