Vue源码解读之Component组件注册的实现

Vue.component('button-counter', {
    //data选项必须是一个函数
    data: function () {
      return {
        count: 0
      }
    },
    template:'#clickBtn'
  })

 var buttonComponent = Vue.extend({
    name:'button-counter',
    data: function () {
      return {
        count: 0
      }
    },
    template:'#clickBtn'
  });
 Vue.component('button-counter', buttonComponent);

function initAssetRegisters (Vue) {
 // 创建组件注册的方法
 // ASSET_TYPES在Vue内部定义，var ASSET_TYPES = ['component','directive','filter'];
 ASSET_TYPES.forEach(function (type) {
  Vue[type] = function (
   id,
   definition
  ) {
   //这里的definition指的是定义（Function或Object），是函数或者对象
   //如果definition不存在，直接返回options内type和id对应的
   //这里的options是指全局的组件，指令和过滤器，见图一
   if (!definition) {
    return this.options[type + 's'][id]
   } else {
    /* istanbul ignore if */
    if ("development" !== 'production' && type === 'component') {
     validateComponentName(id);
    }
    // 如果是component（组件）方法，并且definition是对象
    if (type === 'component' && isPlainObject(definition)) {
     definition.name = definition.name || id;
     //通过this.options._base.extend方法(也就是Vue.extend方法)将定义对象转化为构造器。
     //Vue.options._base = Vue;
     definition = this.options._base.extend(definition);
    }
    if (type === 'directive' && typeof definition === 'function') {
     definition = { bind: definition, update: definition };
    }
    // 将构造器赋值给 this.options[‘component'+ 's'][id]
    //全局的组件，指令和过滤器，统一挂在vue.options上。在init的时候利用mergeOptions合并策略侵入实例，供实例使用。
    this.options[type + 's'][id] = definition;
    return definition
   }
  };
 });
}

Vue.extend = function (extendOptions) {
  extendOptions = extendOptions || {};
  var Super = this;
  var SuperId = Super.cid;
  //组件缓存
  var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {});
  //如果组件已经被缓存在extendOptions上则直接取出
  if (cachedCtors[SuperId]) {
   return cachedCtors[SuperId]
  }

  //如果有name属性，检验name拼写是否合法
  var name = extendOptions.name || Super.options.name;
  if ("development" !== 'production' && name) {
   validateComponentName(name);
  }

  var Sub = function VueComponent (options) {
   this._init(options);
  };
  //将vue上原型的方法挂在Sub.prototype中，Sub的实例同时也继承了vue.prototype上的所有属性和方法。
  //关于 prototype的学习：http://www.cnblogs.com/dolphinX/p/3286177.html
  Sub.prototype = Object.create(Super.prototype);
  //Sub构造函数修正，学习于https://www.cnblogs.com/SheilaSun/p/4397918.html
  Sub.prototype.constructor = Sub;
  Sub.cid = cid++;
  //通过vue的合并策略合并添加项到新的构造器上
  Sub.options = mergeOptions(
   Super.options,
   extendOptions
  );
  //缓存父构造器
  Sub['super'] = Super;

  // 处理props和computed响应式配置项
  if (Sub.options.props) {
   initProps$1(Sub);
  }
  if (Sub.options.computed) {
   initComputed$1(Sub);
  }

  // allow further extension/mixin/plugin usage
  Sub.extend = Super.extend;
  Sub.mixin = Super.mixin;
  Sub.use = Super.use;

  //在新的构造器上挂上vue的工具方法
  ASSET_TYPES.forEach(function (type) {
   Sub[type] = Super[type];
  });
  // enable recursive self-lookup
  if (name) {
   Sub.options.components[name] = Sub;
  }

  // keep a reference to the super options at extension time.
  // later at instantiation we can check if Super's options have
  // been updated.
  Sub.superOptions = Super.options;
  Sub.extendOptions = extendOptions;
  Sub.sealedOptions = extend({}, Sub.options);

  //缓存组件构造器在extendOptions上
  cachedCtors[SuperId] = Sub;
  return Sub
 };

new Vue({
    el: '#components-demo',
    components:{
      'button-counter':{
        template:'#clickBtn',
        data: function () {
          return {
            count: 0
          }
        }
      }
    }
  })

if (options && options._isComponent) {
   //因为Vue动态合并策略非常慢，并且内部组件的选项都不需要特殊处理。
   //调用initInternalComponent快捷方法，内部组件实例化。
   initInternalComponent(vm, options);
 }
 else {
   vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
   );
  }

function initInternalComponent (vm, options) {
 var opts = vm.$options = Object.create(vm.constructor.options);
 // 这样做是因为它比动态枚举更快。
 var parentVnode = options._parentVnode;
 opts.parent = options.parent;
 opts._parentVnode = parentVnode;

 var vnodeComponentOptions = parentVnode.componentOptions;
 opts.propsData = vnodeComponentOptions.propsData;
 opts._parentListeners = vnodeComponentOptions.listeners;
 opts._renderChildren = vnodeComponentOptions.children;
 opts._componentTag = vnodeComponentOptions.tag;

 if (options.render) {
  opts.render = options.render;
  opts.staticRenderFns = options.staticRenderFns;
 }
}

Vue.component('button-counter', {})

Vue.component('buttonCounter', { })

<div id="components-demo">
    <button-counter></button-counter>
</div>