[Vue源码分析]Vue.extend与Vue.component的区别

版本：Vue.js v2.6.11

Vue.extend与Vue.component的区别，网上搜了很多资料说的都挺好，但是心里似乎总有那么点恍惚，于是找来Vue的源码，一探它底层的实现原理。

直入主题，Vue.extend代码如下

/**
     * Class inheritance
     */
    Vue.extend = function (extendOptions) {
      extendOptions = extendOptions || {};
      var Super = this;
      var SuperId = Super.cid;
      var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {});
      if (cachedCtors[SuperId]) {
        return cachedCtors[SuperId]
      }

      var name = extendOptions.name || Super.options.name;
      if (name) {
        validateComponentName(name);
      }

      var Sub = function VueComponent (options) {
        this._init(options);
      };
      Sub.prototype = Object.create(Super.prototype);
      Sub.prototype.constructor = Sub;
      Sub.cid = cid++;
      Sub.options = mergeOptions(
        Super.options,
        extendOptions
      );
      Sub['super'] = Super;

      // For props and computed properties, we define the proxy getters on
      // the Vue instances at extension time, on the extended prototype. This
      // avoids Object.defineProperty calls for each instance created.
      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;

      // create asset registers, so extended classes
      // can have their private assets too.
      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);

      // cache constructor
      cachedCtors[SuperId] = Sub;
      return Sub
    };
  }

这是一个静态方法，this和Super都是指向Vue本身，大概功能就是创建一个继承于Vue的构造器方法VueComponent并配置相关属性和功能，然后返回。

 

下面看看Vue.component的源码：

var ASSET_TYPES = [
    'component',
    'directive',
    'filter'
  ];
function initAssetRegisters (Vue) {
    /**
     * Create asset registration methods.
     */
    ASSET_TYPES.forEach(function (type) {
      Vue[type] = function (
        id,
        definition
      ) {
        if (!definition) {
          return this.options[type + 's'][id]
        } else {
          /* istanbul ignore if */
          if (type === 'component') {
            validateComponentName(id);
          }
          if (type === 'component' && isPlainObject(definition)) {
            definition.name = definition.name || id;
            definition = this.options._base.extend(definition);
          }
          if (type === 'directive' && typeof definition === 'function') {
            definition = { bind: definition, update: definition };
          }
          this.options[type + 's'][id] = definition;
          return definition
        }
      };
    });
  }

这仍然是静态方法，this和this.options._base都是指向Vue本身，this.options._base.extend就是Vue.extend；那这个Vue.component做的事就是调用Vue.extend创建Vue子类，并且在最后把这个子类放到Vue.options.components对象属性里面去，这就是全局注册了。

写一些代码测试下：

// Vue.extend扩展子类
var subExtendClass = Vue.extend({
  name: 'SubExtendClass',
  data: function() {
    return {
      name: 'php'
    };
  },
  template: "<p>hi {{name}}, I'm dclnet</p>"
});
window.subExtendClass = subExtendClass;
console.log('Vue.extend class: subExtendClass ', subExtendClass);
// -----------------------------------------------
// Vue.component注册组件
var subComponent = Vue.component('SubComponent', {
  data: function() {
    return {
      name: 'java'
    };
  },
  template: "<p>hello {{name}}, I'm dclnet</p>"
});
window.subComponent = subComponent;
console.log('Vue.component class: subComponent ', subComponent);
// ===============================================
// html中使用组件
<div id="dclnet">
  <sub-component></sub-component>
  <sub-extend-class></sub-extend-class>
</div>

window.app = new Vue({
  el: '#dclnet',
  // 注意：这里直接放components里面，局部注册 <<<<<
  components: {'sub-extend-class': subExtendClass}
});

页面正常显示

看一看其他测试，也可以看看各Vue.options, subExtendClass.options, subComponent.options属性

subExtendClass.options._base == Vue // output: true
subComponent.options._base == Vue   // output: true
Vue.options._base == Vue // output: true

typeof subExtendClass // output: function
typeof subComponent   // output: function

(new subExtendClass) instanceof Vue              // output: true
(new subExtendClass) instanceof subExtendClass   // output: true

(new subComponent) instanceof Vue          // output: true
(new subComponent) instanceof subComponent // output: true

总结：

Vue.component其实内部是调用Vue.extend创建的子类构造方法，并且创建后放入Vue.options.components里面，以实现全局注册。而Vue.extend仅仅是创建子类构造方法，不放入Vue.options.components。其他细节和应用可看官方文档和网上文章。

以上，基于Vue.js v2.6.11的分析，如有问题欢迎一起讨论。