Vue.component('button-counter', {
 //data選項(xiàng)必須是一個(gè)函數(shù)
 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) {
 // 創(chuàng)建組件注冊(cè)的方法
 // ASSET_TYPES在Vue內(nèi)部定義，var ASSET_TYPES = ['component','directive','filter'];
 ASSET_TYPES.forEach(function (type) {
 Vue[type] = function (
 id,
 definition
 ) {
 //這里的definition指的是定義（Function或Object），是函數(shù)或者對(duì)象
 //如果definition不存在，直接返回options內(nèi)type和id對(duì)應(yīng)的
 //這里的options是指全局的組件，指令和過濾器，見圖一
 if (!definition) {
 return this.options[type + 's'][id]
 } else {
 /* istanbul ignore if */
 if ("development" !== 'production' && type === 'component') {
 validateComponentName(id);
 }
 // 如果是component（組件）方法，并且definition是對(duì)象
 if (type === 'component' && isPlainObject(definition)) {
 definition.name = definition.name || id;
 //通過this.options._base.extend方法(也就是Vue.extend方法)將定義對(duì)象轉(zhuǎn)化為構(gòu)造器。
 //Vue.options._base = Vue;
 definition = this.options._base.extend(definition);
 }
 if (type === 'directive' && typeof definition === 'function') {
 definition = { bind: definition, update: definition };
 }
 // 將構(gòu)造器賦值給 this.options[‘component'+ 's'][id]
 //全局的組件，指令和過濾器，統(tǒng)一掛在vue.options上。在init的時(shí)候利用mergeOptions合并策略侵入實(shí)例，供實(shí)例使用。
 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 = {});
 //如果組件已經(jīng)被緩存在extendOptions上則直接取出
 if (cachedCtors[SuperId]) {
 return cachedCtors[SuperId]
 }

 //如果有name屬性，檢驗(yàn)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的實(shí)例同時(shí)也繼承了vue.prototype上的所有屬性和方法。
 //關(guān)于 prototype的學(xué)習(xí)：http://www.cnblogs.com/dolphinX/p/3286177.html
 Sub.prototype = Object.create(Super.prototype);
 //Sub構(gòu)造函數(shù)修正，學(xué)習(xí)于https://www.cnblogs.com/SheilaSun/p/4397918.html
 Sub.prototype.constructor = Sub;
 Sub.cid = cid++;
 //通過vue的合并策略合并添加項(xiàng)到新的構(gòu)造器上
 Sub.options = mergeOptions(
 Super.options,
 extendOptions
 );
 //緩存父構(gòu)造器
 Sub['super'] = Super;

 // 處理props和computed響應(yīng)式配置項(xiàng)
 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;

 //在新的構(gòu)造器上掛上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);

 //緩存組件構(gòu)造器在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) {
 //因?yàn)閂ue動(dòng)態(tài)合并策略非常慢，并且內(nèi)部組件的選項(xiàng)都不需要特殊處理。
 //調(diào)用initInternalComponent快捷方法，內(nèi)部組件實(shí)例化。
 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);
 // 這樣做是因?yàn)樗葎?dòng)態(tài)枚舉更快。
 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>