1.4 子类构造器

选项校验介绍完后，在正式进入合并策略之前，还需要先了解一个东西：子类构造器。为什么需要先提到子类构造器呢？

按照前面的知识，Vue内部提供了四个默认选项，关键的三个是components,directives,filter。那么当我们传递一个选项配置到Vue进行初始化，所需要合并的选项好像也仅仅是那关键的三个默认选项而已，那么源码中大篇幅做的选项合并策略又是针对什么场景呢？答案就是这个子类构造器。

Vue提供了一个Vue.extend的静态方法，它是基于基础的Vue构造器创建一个“子类”，而这个子类所传递的选项配置会和父类的选项配置进行合并。这是选项合并场景的由来。

因此有不要先了解子类构造器的实现。下面例子中，我们创建了一个Child的子类，它继承于父类Parent,最终将子类挂载到#app元素上。最终获取的data便是选项合并后的结果。

  1. var Parent = Vue.extend({
  2.   data() {
  3.     test: '父类'，
  4.     test1: '父类1'
  5.   }
  6. })
  7. var Child = Parent.extend({
  8.   data() {
  9.     test: '子类',
  10.     test2: '子类1'
  11.   }
  12. })
  13. var vm = new Child().$mount('#app');
  14. console.log(vm.$data);
  15. // 结果 
  16. {
  17.   test: '子类',
  18.   test1: '父类1',
  19.   test2: '子类1'
  20. }

Vue.extend的实现思路很清晰，创建了一个Sub的类，这个类的原型指向了父类，并且子类的options会和父类的options进行合并，mergeOptions的其他细节接下来会重点分析。

  1. Vue.extend = function (extendOptions) {
  2.   extendOptions = extendOptions || {};
  3.   var Super = this;
  5.   var name = extendOptions.name || Super.options.name;
  6.   if (name) {
  7.     validateComponentName(name); // 校验子类的名称是否符合规范
  8.   }
  10.   // 创建子类构造器
  11.   var Sub = function VueComponent (options) {
  12.     this._init(options);
  13.   };
  14.   Sub.prototype = Object.create(Super.prototype); // 子类继承于父类
  15.   Sub.prototype.constructor = Sub;
  16.   Sub.cid = cid++;
  17.   // 子类和父类构造器的配置选项进行合并
  18.   Sub.options = mergeOptions(
  19.     Super.options,
  20.     extendOptions
  21.   );
  23.   return Sub // 返回子类构造函数
  24. };