Vue的全局配置

Vue 全局配置

• 以下笔记来自Vue官方文档并截取个人觉得较为重要的知识点，带了一点自己的改动。

Vue.config

• 启动之前修改全局的属性

silent 静默

Vue.config.silent = true

静默(取消)日志与警告提醒

optionMergeStrategies 自定义选项策略

• 合并策略选项分别接收在父实例和子实例谁给定义的该选项的值作为第一个和第二个参数，Vue实例上下文被作为第三个参数传入。

Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
  return child + 1
}

const Profile = Vue.extend({
  _my_option: 1
})

// Profile.options._my_option = 2
//child 接收到了子实例Profile传入的键值 1

devtools 代码调用工具

• 确认是否允许用户打开开发调试工具，开发版本默认为true，生产版本默认为false。
  Vue.config.devtools = true

errorHandler

• 指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获得错误信息和Vue的实例。

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
}
//err 错误句柄，vm vue上下文，info vue自定义错误信息

warnHandler

• 与errHandler类似，在开发环境下，警告会被抛出，在生产环境下不会。

ignoredElement

• Vue会全局检查文档里飞html的标签，如果是自定义标签或者其他框架的组件(如：react Web-ComponentsApi等)，Vue会抛出组件未注册或者拼写错误的警告Unknown custom element，支持正则表达式。

Vue.config.ignoredElements = [
  'my-custom-web-component',
  'another-web-component',
  // 用一个 `RegExp` 忽略所有“ion-”开头的元素
  // 仅在 2.5+ 支持
  /^ion-/
]

keyCodes 快捷键

• 给v-on添加自定义按键别名，他们的值就代表的按键号。
• 别名不支持camlCase驼峰命名法，取而代之的是Kekab-case短横线命名，并且需要用引号括起来。

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase 不可用
  mediaPlayPause: 179,
  // 取而代之的是 kebab-case 且用双引号括起来
  "media-play-pause": 179,
  up: [38, 87]
}
<input type="text" @keyup.media-play-pause="method">

performance

• 对开发工具性能、时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪，仅适用于开发者模式和支持performance.mark的浏览器

productionTip

• false阻止启动时提示生产环境