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

时间:2021-05-26

本文主要介绍了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时,就会用到上面的策略。总结下来有以下几种场景:

  • 使用了 Vue.mixin 或 mixins 配置项
  • 使用了 Vue.extend 或 extends 配置项或Vue.component(背后实际上是调用了Vue.extend)
  • 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)

    控制台打印如下:

    按顺序解释如下:

  • undefined "Vue.extend"合并 Vue.options 和 extendOptions
  • undefined "Vue.component"合并 Vue.options 和 extendOptions
  • undefined "extends"extends配置项合并先于mixins,此时合并的是 Vue.options 和extends配置,因此toVal是undefined
  • extends mixins完成了extends合并,接着就是mixins,此时 Vue.options 上已经包含了extends的配置项,因此 toVal 是extends,fromVal就是mixins。最终合并后的值:extends&mixins
  • extends&mixins newVue完成了extends和mixins后,最终合并vm.constructor和实例的options
  • extends&mixins&newVue最终合并后的 customOption 的选项值
  • devtools

    离线下载chrome 扩展地址(不需要梯子):https://ponent')的各个阶段花费的时间:

    在 IE11 中查看

    productionTip(2.2.0+)

    对于开发版本,会默认向控制台打印:

    设置为false就不再显示。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章