Vue2.0源码学习(4) - 合并配置

Z时代
2024-01-10
分类：综合

vue

合并配置

通过之前的源码学习，我们已经了解到了new Vue主要有两种场景，第一种就是在外部主动调用new Vue创建一个实例，第二个就是代码内部创建子组件的时候自行创建一个new Vue实例。但是无论那种new Vue方式，我们都需要进入了Vue._init，执行mergeOptions函数合并配置。为了更直观，我们整个demo调试耍耍。

// src\main.js
let childComp = {
  template:"<div>{{msg}}</div>",
  data(){
    return{
      msg:"childComp"
    }
  },
  created(){
    console.log("childComp created");
  },
  mounted(){
    console.log("childComp mounted");
  }
}
Vue.mixin({
  created(){
    console.log("mixin");
  }
})
let app = new Vue({
  el:"#app",
  render: h => h(childComp)
})

我用的时vue-cli3，这里有个小细节需要注意一下，vue-cli3开发环境默认使用的是runtime版本（node_modules\vue\dist\vue.runtime.esm.js），这个版本是不支持编译template的，需要用Compiler版本，这个在vue.config.js中配置一下即可，配置代码如下：

module.exports = {
    runtimeCompiler: true
}

准备工作搞好了，那么我们现在开始进入_init函数，看看合并配置是怎么一个说法。

// src\core\instance\init.js
Vue.prototype._init = function (options?: Object) {
    ...
    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),  //vue.options
        options || {},  //new Vue中的options
        vm
      )
    }
    ...
}

外部调用场景

上述代码中可明显看出两中合并配置的情况，我们一开始进入的肯定时非组件模式，也就是else情况。mergeOptions传入了3个入参，我们先看第一个入参的resolveConstructorOptions方法做了什么。

// src\core\instance\init.js
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
}

入参Ctor = vm.constructor = Vue,Vue没有父级，所以不会进入到if逻辑，因此这里返回的就是Vue.options的配置。Vue.options则在初始化的时候就做了定义和配置。

// src\core\global-api\index.js
Vue.options = Object.create(null)
ASSET_TYPES.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
})
Vue.options._base = Vue     //createComponent时用到，之前提及过。
extend(Vue.options.components, builtInComponents)   //扩展一些内置组件

这里ASSET_TYPES在src\shared\constants.js有定义

// src\shared\constants.js
export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]

然后我们再返回去_init函数分析一下mergeOptions函数：

// src\core\util\options.js
export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  ...  
  const options = {}
  let key
  、、
  for (key in parent) {
    mergeField(key)
  }
  for (key in child) {
    //   key没在parent定义时
    if (!hasOwn(parent, key)) {
      mergeField(key)
    }
  }
  function mergeField (key) {
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
  }
  return options
}

简略了部分代码，我们先去关注合并的关键代码。

这边其实就是遍历了parent(Vue.options)和child(new Vue中的options),然后遍历的过程中调用了mergeField方法。而该方法先去拿到一个strat函数，这个函数首先是再strats中去找，没找到就使用defaultStrat默认函数(defaultStrat可自行查阅源码)，我们主要看strats:

// src\core\util\options.js
const strats = config.optionMergeStrategies

strats是定义在config中，所以说我们是可以随意改动strats的。然后在options.js中，strats扩展了很多属性，每个属性(key)都是一种合并策略，有兴趣的可以一个个研究，因为我们例子是生命周期的合并，所以我们先挑生命周期的合并策略来分析，后面遇到其他的再做分析。

// src\core\util\options.js
LIFECYCLE_HOOKS.forEach(hook => {
  strats[hook] = mergeHook
})

LIFECYCLE_HOOKS定义在src\shared\constants.js

// src\shared\constants.js
export const LIFECYCLE_HOOKS = [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
  'activated',
  'deactivated',
  'errorCaptured'
]

遍历这些值，然后定义它们的合并策略，其实都mergeHook方法，都是一样的合并策略，下面我们看看mergeHook函数：

// src\core\util\options.js
function mergeHook (
  parentVal: ?Array<Function>,
  childVal: ?Function | ?Array<Function>
): ?Array<Function> {
  return childVal
    ? parentVal
      ? parentVal.concat(childVal)
      : Array.isArray(childVal)
        ? childVal
        : [childVal]
    : parentVal
}

这个多层嵌套的三元表达式看着复杂，其实不难，我们可以分段理解：

①：childVal有值：进入②，

childVal没值：赋值parentVal；

②：parentVal有值：parentVal和childVal数组合并，

parentVal没值：进入③；

③：childVal是个数组：赋值childVal，

childVal不是数组：赋值[childVal]；

最终我们return了一个数组到mergeOptions函数。

现在我们回过头来demo中的Vue.mixin定义，其源码其实也调用了mergeOptions，我们看看源码：

// src\core\global-api\mixin.js
export function initMixin (Vue: GlobalAPI) {
  Vue.mixin = function (mixin: Object) {
    this.options = mergeOptions(this.options, mixin)
    return this
  }
}

mixin的源码很简单，其实就是调用了mergeOptions对Vue.options做了合并。有个小细节需要留意，就是demo中Vue.mixin和new Vue的代码顺序，必须先对Vue.mixin做出定义，不然在new Vue的时候Vue.options和new Vue的options合并时，是会丢失掉Vue.mixin的，因为那时候Vue.mixin并没有执行mergeOptions把options合并到Vue.options上。

组件场景

接下来我们看另一种情况，组件合并配置。也就是在_inti方法中运行了initInternalComponent函数，我们来分析一下它做了什么？

// src\core\instance\init.js
export function initInternalComponent (vm: Component, options: InternalComponentOptions) {
  const opts = vm.$options = Object.create(vm.constructor.options)
  // doing this because it's faster than dynamic enumeration.
  const parentVnode = options._parentVnode
  opts.parent = options.parent
  opts._parentVnode = parentVnode
  const vnodeComponentOptions = parentVnode.componentOptions
  opts.propsData = vnodeComponentOptions.propsData
  opts._parentListeners = vnodeComponentOptions.listeners
  opts._renderChildren = vnodeComponentOptions.children
  opts._componentTag = vnodeComponentOptions.tag
  if (options.render) {
    opts.render = options.render
    opts.staticRenderFns = options.staticRenderFns
  }
}

子组件的合并就相对简单很多了，vm.$options去继承了子组件构造器vm.constructor.options，然后再把一些配置挂载到上面。我们主要看看vm.constructor.options是怎么来的。

// src\core\global-api\extend.js
Vue.extend = function (extendOptions: Object): Function {
    const Super = this
    ...
    const Sub = function VueComponent (options) {
      this._init(options)
    }
    // 构造器指向自己
    Sub.prototype.constructor = Sub
    // 合并配置
    Sub.options = mergeOptions(
      Super.options,
      extendOptions
    )
    ...
}