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


Posted in Javascript onNovember 22, 2017

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

optionMergeStrategies

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

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)

控制台打印如下:

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

按顺序解释如下:

  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
  6. extends&mixins&newVue最终合并后的 customOption 的选项值

devtools

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

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

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

errorHandler

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

Vue.config.errorHandler = function (err, vm, info) {
  console.log(arguments)
}
new Vue({
  created: function () {
    throw "error msg"
  }
})
// ["error msg", Vue$3, "created hook"]

ignoredElements

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

  1. Vue定义和HTML标签同名的元素是无效的,比如定义Vue.compoent('header',{})
  2. ignoredElements包含Vue定义的元素是无效的
  3. WCA自定义元素可以被构建虚拟dom

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

performance(2.2.0+)

只能在开发版上使用。caniuse上查询 performance 可知主流浏览器都已经支持,这个可以用于分析Vue组件在不同阶段中花费的时间,进而知道哪里可以优化。查看源码,发现在以下阶段加上了performance.measure。

  1. performance.measure((组件名+ " render"), startTag, endTag);
  2. performance.measure((组件名+ " patch"), startTag, endTag);
  3. performance.measure((组件名 + " init"), startTag, endTag);
  4. performance.measure(((组件名 + " compile"), 'compile', 'compile end');

比如在谷歌浏览器中查看自定义组件Vue.component('my-component')的各个阶段花费的时间:

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

在 IE11 中查看

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

productionTip(2.2.0+)

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

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

设置为false就不再显示。

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

Javascript 相关文章推荐
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
详解js的作用域、预解析机制
Feb 05 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 #Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 #Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 #Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 #Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 #Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 #Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
深入认识JavaScript中的函数
2007/01/22 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python3 实现文件批量重命名示例代码
2019/06/03 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
金融专业应届生求职信
2013/11/02 职场文书
教师的实习鉴定
2013/12/15 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
工作推荐信范文
2014/05/10 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
工人先锋号申报材料
2014/12/29 职场文书
电力安全学习心得体会
2016/01/18 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python
python中validators库的使用方法详解
2022/09/23 Python