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 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
详解jQuery中的事件
Dec 14 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
Vue单文件组件开发实现过程详解
Jul 30 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
php下目前为目最全的CURL中文说明
2010/08/01 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
北大自主招生自荐信
2013/10/19 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
高中开学感言
2015/08/01 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书