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

　　

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

　　

<强> optionMergeStrategies

　　

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

　　

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

　　

比如道具、方法计算就是同一个策略:子配置项会覆盖父级配置项。源码如下:

　　 　　 　　var stratocaster=config.optionMergeStrategies; 　　stratocaster。道具=stratocaster。方法=strats.computed=function (parentVal childVal) { 　　如果(! childVal){返回对象。创建(parentVal | | null)} 　　如果(! parentVal){返回childVal} 　　var ret=Object.create(空); 　　扩展(ret, parentVal); 　　扩展(ret, childVal); 　　返回受潮湿腐烂 　　}; 　　 　　

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

　　
    　　<李>使用了Vue。李混合或混合配置项 　　<李>使用了Vue。扩展或延伸配置项或Vue.component(背后实际上是调用了Vue.extend) 　　<李>新Vue()或新Vue.extend() 　　
　　

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

　　 　　 　　Vue.config。optionMergeStrategies [' customOption ']=函数(toVal fromVal) { 　　控制台。日志(toVal fromVal) 　　如果(! toVal)返回fromVal 　　如果(! fromVal)返回toVal//toVal和fromVal同时存在,表明此时父母和孩子都包含配置型 　　返回toVal + ', ' + fromVal 　　} 　　 　　Vue.extend ({ 　　customOption:“Vue.extend” 　　}） 　　 　　Vue.component(“自定义”,{ 　　customOption:“Vue.component” 　　}） 　　 　　var vm=new Vue ({ 　　customOption:“newVue”, 　　延伸:{ 　　customOption:“延伸” 　　}， 　　mixin: [{ 　　customOption:“混合” 　　}) 　　}） 　　 　　console.log (vm。options.customOption美元) 　　 　　

控制台打印如下:

　　

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

　　

按顺序解释如下:

　　
    　　<李> Vue定义”。扩展“合并Vue。李选项和extendOptions 　　<李>定义“Vue.component”合并Vue。李选项和extendOptions 　　<李>未定义的“延伸”扩展配置项合并先于mixin,此时合并的是Vue。选择和扩展配置,因此toVal是未定义的 　　<李>扩展mixin完成了合延伸并,接着就是mixin,此时Vue。选择上已经包含了延伸的配置项,因此toVal是延伸,fromVal就是mixin。最终合并后的值:extends& mixin李 　　<李> extends& mixin newVue完成了延伸和混合后,最终合并vm.constructor和实例的选择 　　<李> extends& mixins& newVue最终合并后的customOption的选项值
    　　李 　　
　　

devtools 　　

离线下载chrome扩展地址(不需要梯子):https://www.crx4chrome.com/crx/11903/

　　

把下载的文件拖到扩展程序页面即可完成安装。

　　

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

　　

<强> errorHandler
　　

　　

Vue涉及到执行用户配置的地方都放在尝试中,因此即使你抛扔出错误,整个实例也不会挂。

　　 　　 　　Vue.config。errorHandler=函数(呃,vm,信息){ 　　console.log(参数) 　　} 　　新Vue ({ 　　创建:函数(){ 　　把“错误味精” 　　} 　　}）//(“错误味精”,Vue 3美元,“钩” 　　 　　

<强> ignoredElements
　　

　　

首先要理解忽略的到底是什么?是元素本身还是包括元素里的内容(就像v-pre一样),首先要知道这个配置的背景,官网举了Web组件的api(以下简称WCA)的例子,WCA和Vue.component一样,也可以自定义元素,不过这个目前还是个草案。那么对于Vue来讲,元素就可以分为:HTML原生元素,Vue自定义元素,WCA自定义元素。那么对于一个元素,Vue的判断顺序:原生比;Vue自定义比;ignoredElements祝辞无法识别,对于无法识别的Vue会假定你可能把Vue自己定义元素拼错了,因此会发出未知的定制元素的警告。另外:

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