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>