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 相关文章推荐
[原创]用javascript实现检测指定目录是否存在的方法
Jan 12 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
原生js实现日期联动
Jan 12 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
JavaScript注册时密码强度校验代码
Jun 30 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
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
人族 Terran 魔法与科技
2020/03/14 星际争霸
写出高质量的PHP程序
2012/02/04 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
juqery 学习之四 筛选过滤
2010/11/30 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
python自动安装pip
2014/04/24 Python
python实现flappy bird小游戏
2018/12/24 Python
Python创建或生成列表的操作方法
2019/06/19 Python
Python遍历字典方式就实例详解
2019/12/28 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
物流合作计划书
2014/01/10 职场文书
旷课检讨书1000字
2014/02/14 职场文书
人事专员职责
2014/02/22 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
2014年科协工作总结
2014/12/09 职场文书
关于分班的感言
2015/08/04 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle