vue源码阅读记录8-merge

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。

今天看merge的逻辑，之前我们看了一些函数，都是基于root树上面的一些标记做了一些处理。可以知道该方法在_init中,

Vue.prototype._init = function (options?: Object) {

  // merge options

  if (options && options._isComponent) {

    // optimize internal component instantiation

    // since dynamic options merging is pretty slow, and none of the

    // internal component options needs special treatment.

    initInternalComponent(vm, options)

  } else {

    vm.$options = mergeOptions(

      resolveConstructorOptions(vm.constructor),

      options || {},

      vm

    )

  }

}

在这个mergeOptions函数中，再看这个resolveConstructorOptions这个函数，了解到mergeoptions这个函数返回的值就是resolveConstructorOptions的返回值。其实就是把 resolveConstructorOptions(vm.constructor) 的返回值和 options 做合并，反返回了vm.constructor.options。再看这个值是从哪里来的，看src/core/global-api/index.js这个文件中的initGlobalAPI 方法

Vue.options = Object.create(null)
  ASSET_TYPES.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
  })

  // this is used to identify the "base" constructor to extend all plain-object
  // components with in Weex's multi-instance scenarios.
  Vue.options._base = Vue

首先通过 Vue.options = Object.create(null) 创建一个空对象，然后遍历 ASSET_TYPES，其实就是给vue的options添加了compoents,directive,filter 三个对象， Vue.options._base = Vue vue挂在_base上，后面会用到。最后通过 extend(Vue.options.components, builtInComponents) 把内置组件扩展到 Vue.options.components 上,这可能和keep-live相关吧，具体的还要继续往后面看。再回到mergeoptions，这个方法就是吧parent和child的对象进行合并返回成一个新的对象。

export function resolveConstructorOptions (Ctor: Class<Component>) {
  let options = Ctor.options
  if (Ctor.super) {
    const superOptions = resolveConstructorOptions(Ctor.super)
    const cachedSuperOptions = Ctor.superOptions
    if (superOptions !== cachedSuperOptions) {
      // super option changed,
      // need to resolve new options.
      Ctor.superOptions = superOptions
      // check if there are any late-modified/attached options (#4976)
      const modifiedOptions = resolveModifiedOptions(Ctor)
      // update base extend options
      if (modifiedOptions) {
        extend(Ctor.extendOptions, modifiedOptions)
      }
      options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions)
      if (options.name) {
        options.components[options.name] = Ctor
      }
    }
  }
  return options
}

这边就是对child机型递归的处理方法。这个就是我们常规使用的

类似这样的场景。

new Vue({
  el: '#app',
  render: h => h(......)
})

还有一种场景就是componment组件调用场景。

组件常见主要是定义在src/core/global-api/extend.js中。

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)
    }

    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.
    if (Sub.options.props) {
      initProps(Sub)
    }
    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
    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
  }

具体的怎么操作，后面再继续读

总结

逻辑越来越模糊，需要仔细的再回温一下之前的内容，后面会吧速度慢下来。