时间: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时,就会用到上面的策略。总结下来有以下几种场景:
单独使用一个时,也会触发合并规则,但是只会有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)控制台打印如下:
按顺序解释如下:
devtools
离线下载chrome 扩展地址(不需要梯子):https://ponent')的各个阶段花费的时间:
在 IE11 中查看
productionTip(2.2.0+)
对于开发版本,会默认向控制台打印:
设置为false就不再显示。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Vue.extend配置项data必须为function,否则配置无效。data的合并规则(可以看《Vue官方文档梳理-全局配置》)源码如下:传入非functi
Vue中的组件和指令分为局部组件、局部指令和全局组件、全局指令。对于注册有一定数量的全局指令和全局组件时,官方文档中的方法就显得有些不够清爽了。全局组件在Vue
创建Vue项目以及引入Iview官方文档#全局安装vue-cli$npminstall--globalvue-cli#创建一个基于webpack模板的新项目$v
一、全局配置less1.下载插件**vueaddstyle-resources-loader**vueaddpluginName是vue-cli3提供的。vue
效果图如下:1.准备好环境使用vue/cil初始化项目配置:npminstall-g@vue/cli//全局安装@vue/clivuecreatedemo-vu