Vue如何实现组件的源码解析

官网上关于组件继承分为两大类，全局组件和局部组件。无论哪种方式，最核心的是创建组件，然后根据场景不同注册组件。

有一点要牢记，“Vue.js 组件其实都是被扩展的 Vue 实例”！

1. 全局组件

// 方式一var MyComponent = Vue.extend({  name: 'my-component',  template: '<div>A custom component!</div>'});Vue.component('my-component', MyComponent);// 方式二Vue.component('my-component', {  name: 'my-component',  template: '<div>A custom component!</div>'});// 使用组件<div id="example">  <my-component></my-component></div>

主要涉及到两个静态方法：

Vue.extend：通过扩展Vue实例的方法创建组件 Vue.component：注册组件

先来看看Vue.extend源码，解释参考中文注释：

Vue.extend = function (extendOptions) { extendOptions = extendOptions || {}; var Super = this; var isFirstExtend = Super.cid === 0; if (isFirstExtend && extendOptions._Ctor) {  return extendOptions._Ctor; } var name = extendOptions.name || Super.options.name; // 如果有name属性，即组件名称，检测name拼写是否合法 if ('development' !== 'production') {  if (!/^[a-zA-Z][/w-]*$/.test(name)) {   warn('Invalid component name: "' + name + '". Component names ' + 'can only contain alphanumeric characaters and the hyphen.');   name = null;  } } // 创建一个VueComponent 构造函数，函数名为‘VueComponent'或者name var Sub = createClass(name || 'VueComponent'); // 构造函数原型继承Vue.prototype Sub.prototype = Object.create(Super.prototype); Sub.prototype.constructor = Sub; Sub.cid = cid++; // 合并Vue.options和extendOptions，作为新构造函数的静态属性options   Sub.options = mergeOptions(Super.options, extendOptions); //'super'静态属性指向Vue函数 Sub['super'] = Super; // start-----------------拷贝Vue静态方法   // allow further extension Sub.extend = Super.extend; // create asset registers, so extended classes // can have their private assets too. config._assetTypes.forEach(function (type) {  Sub[type] = Super[type]; }); // end-----------------拷贝Vue静态方法   // enable recursive self-lookup if (name) {  Sub.options.components[name] = Sub; } // cache constructor：缓存该构造函数 if (isFirstExtend) {  extendOptions._Ctor = Sub; } return Sub;};

可以看到，Vue.extend的关键点在于：创建一个构造函数function VueComponent(options) { this._init(options) }，通过原型链继承Vue原型上的属性和方法，再讲Vue的静态函数赋值给该构造函数。

再看看Vue.component源码，解释参考中文注释：

// _assetTypes: ['component', 'directive', 'elementDirective', 'filter', 'transition', 'partial']config._assetTypes.forEach(function (type) { // 静态方法Vue.component Vue[type] = function (id, definition) {  if (!definition) {   return this.options[type + 's'][id];  } else {   /* istanbul ignore if */   if ('development' !== 'production') {    if (type === 'component' && (commonTagRE.test(id) || reservedTagRE.test(id))) {     warn('Do not use built-in or reserved HTML elements as component ' + 'id: ' + id);    }   }   // 如果第二个参数是简单对象，则需要通过Vue.extend创建组件构造函数   if (type === 'component' && isPlainObject(definition)) {    if (!definition.name) {     definition.name = id;    }    definition = Vue.extend(definition);   }   // 将组件函数加入Vue静态属性options.components中，也就是，全局注入该组件   this.options[type + 's'][id] = definition;   return definition;  } };});