Vue官方文档梳理之全局配置

本文主要介绍了Vue官方文档梳理之全局配置，分享给大家，也给自己留个笔记。具体如下：

optionMergeStrategies

用于自定义选项的合并策略，Vue已经预定义了一些自己配置项的合并策略，如下图所示。

比如props、methods、computed就是同一个策略：子配置项会覆盖父级配置项。源码如下：

var strats = config.optionMergeStrategies;
strats.props =
strats.methods =
strats.computed = function (parentVal, childVal) {
 if (!childVal) { return Object.create(parentVal || null) }
 if (!parentVal) { return childVal }
 var ret = Object.create(null);
 extend(ret, parentVal);
 extend(ret, childVal);
 return ret
};

什么时候才会用到这些配置的合并规则呢？查阅源码，发现只要调用mergeOptions时，就会用到上面的策略。总结下来有以下几种场景：

1. 使用了 Vue.mixin 或 mixins 配置项
2. 使用了 Vue.extend 或 extends 配置项或Vue.component（背后实际上是调用了Vue.extend）
3. new Vue() 或 new Vue.extend()

单独使用一个时，也会触发合并规则，但是只会有child包含配置项，所以不需要合并。只有当多个一起使用时，比如 Vue.compeont 和 extends 、mixins 配置项一起使用，这个时候就parent和child都会有相同的配置项，这时候也才有所谓的合并，举个完整的例子来说明上述的场景。

Vue.config.optionMergeStrategies['customOption'] = function (toVal, fromVal) {
  console.log(toVal, fromVal)
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  // toVal 和 fromVal 同时存在，表明此时parent和child都包含配置型
  return toVal + '&' + fromVal
}

Vue.extend({
  customOption: 'Vue.extend'
})

Vue.component('custom', {
  customOption: 'Vue.component'
})

var vm = new Vue({
  customOption: 'newVue',
  extends: {
    customOption: 'extends'
  },
  mixins: [{
    customOption: 'mixins'
  }]
})

console.log(vm.$options.customOption)

控制台打印如下：

按顺序解释如下：

1. undefined "Vue.extend"合并 Vue.options 和 extendOptions
2. undefined "Vue.component"合并 Vue.options 和 extendOptions
3. undefined "extends"extends配置项合并先于mixins，此时合并的是 Vue.options 和extends配置，因此toVal是undefined
4. extends mixins完成了extends合并，接着就是mixins，此时 Vue.options 上已经包含了extends的配置项，因此 toVal 是extends，fromVal就是mixins。最终合并后的值：extends&mixins
5. extends&mixins newVue完成了extends和mixins后，最终合并vm.constructor和实例的options