export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  if (process.env.NODE_ENV !== 'production') {
    checkComponents(child)
  }
  // 如果 child 是函数，就送函数上获取配置项
  if (typeof child === 'function') {
    child = child.options
  }
  // 对选项配置进行标准化
  normalizeProps(child, vm)
  normalizeInject(child, vm)
  normalizeDirectives(child)
  // 在子选项上进行 extends (扩展) 和 mixins (混合)
  // 并且必须是原始配置对象，也就没有经过合并的配置对象
  // 而每个被合并过的配置对象上都存在 _base 属性
  if (!child._base) {
    // 组件的 extents 和 Vue.extend 是一样的，extents 为了便于扩展单文件组件
    // var CompA = { ... } , var CompB = { extends: CompA, ... }, B 继承了 A
    if (child.extends) {
      parent = mergeOptions(parent, child.extends, vm)
    }
    if (child.mixins) {
      for (let i = 0, l = child.mixins.length; i < l; i++) {
        parent = mergeOptions(parent, child.mixins[i], vm)
      }
    }
  }
  const options = {}
  let key
  for (key in parent) {
    mergeField(key)
  }
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key)
    }
  }
  function mergeField (key) {
    // 选项合并策略
    // 默认策略为：如果 child 有值，就会覆盖 parent 值，否则使用 parent 值
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
  }
  return options
}
复制代码

export function initExtend (Vue: GlobalAPI) {
  /**
   * Each instance constructor, including Vue, has a unique
   * cid. This enables us to create wrapped "child
   * constructors" for prototypal inheritance and cache them.
   */
  Vue.cid = 0
  let cid = 1
  /**
   * Class inheritance
   * 使用 Vue.extend，创建一个子类，参数是一个包含组件选项的对象
   */
  Vue.extend = function (extendOptions: Object): Function {
    extendOptions = extendOptions || {}
    const Super = this
    const SuperId = Super.cid
    const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
    // 缓存：如果使用同一个混入配置项，如果缓存中存在已存在，就直接使用缓存的值
    if (cachedCtors[SuperId]) {
      return cachedCtors[SuperId]
    }
    // 校验组件名称
    const name = extendOptions.name || Super.options.name
    if (process.env.NODE_ENV !== 'production' && name) {
      validateComponentName(name)
    }
    /*
     核心：定义一个 Vue 子类，本质上和 Vue 构造函数一样
      function Vue (options) {
        this._init(options)
      }
    */
    const 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.
    // 将 props 代理到子类上，在子类中可以直接通过 this.props 形式访问
    if (Sub.options.props) {
      initProps(Sub)
    }
    // 将 computed 代理到子类上，在子类中可以直接通过 this.computed 形式访问
    if (Sub.options.computed) {
      initComputed(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
    // 组件递归自调用的原理
    // { name:'comp', components: { Comp } }
    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
  }
}
复制代码

export function initAssetRegisters (Vue: GlobalAPI) {
  /**
   * Create asset registration methods.
   * 统一初始化 Vue.component, Vue.directive, Vue.filter
   */
  ASSET_TYPES.forEach(type => {
    Vue[type] = function (
      id: string,
      definition: Function | Object
    ): Function | Object | void {
      // 如果对应的 definition 没有传递，直接返回
      if (!definition) {
        return this.options[type + 's'][id]
      } else {
        /* istanbul ignore if */
        // 校验组件名字
        if (process.env.NODE_ENV !== 'production' && type === 'component') {
          validateComponentName(id)
        }
        // 如果是组件
        if (type === 'component' && isPlainObject(definition)) {
          // 设置组件的 name，如果是配置对象就先取 options.name，不存在就取传入的第一个值
          definition.name = definition.name || id
          // 通过 Vue.extend 方法，基于 definition 扩展一个新的组件子类，直接 new definition() 实例化一个组件
          definition = this.options._base.extend(definition)
        }
         // 如果是指令
        if (type === 'directive' && typeof definition === 'function') {
          definition = { bind: definition, update: definition }
        }
        // 将每个配置项都放到根组件的对应配置项中
        // 如：{components:{ id: comonent }，directives:{id: directive} ，filters:{ id: filter }，... }
        this.options[type + 's'][id] = definition
        return definition
      }
    }
  })
}
复制代码