Vue.extends(options)

initGlobalApiMixin 入口

Vue.extends方法在 Vue 中的作用是将一个组件的配置options创建成组件构造函数, 是一个很重的方法

import { mergeOptions, nextTick } from "../utils/index";
import { initExtendsMixin } from "./extend"; 
import { initAccessMixin } from "./access"; 
import { ACCESS_TYPE } from "./const"; 

// 初始化全局Api
export function initGlobalApiMixin(Vue) {
  // 存放全局API
  Vue.options = {};

  Vue.mixin = function (mixin) {
    this.options = mergeOptions(this.options, mixin);
  };

  // Vue继承 Vue.extends()
  initExtendsMixin(Vue); 

  Vue.nextTick = nextTick;
}

initExtendsMixin

Vue.extends是一个函数的调用,且没调用依次都会根据this来创建一个子类, 同样需要一个cid来确保唯一

import { mergeOptions } from "../utils/index";

// Vue.extends({})
export function initExtendsMixin(Vue) {
  let cid = 0;
  Vue.extends = function createComponent(extendsOption) {
    const Super = this;

    const Sub = function CreateComponent(options) {
      this._init(options);
    };

    // 继承
    Sub.prototype = Object.create(Super.prototype);
    Sub.prototype.constructor = Sub;
    Sub.cid = cid++; // 确保唯一

    Sub.options = mergeOptions(Super.options, extendsOption); // 静态选项合并

    // 父类身上的其他方法可以继续定义, 这里暂时不做定义了,进实现核心部分

    return Sub;
  };
}