欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-20 21:46:28
本文主要介绍了vue官方文档梳理之全局配置,分享给大家,也给自己留个笔记。具体如下: optionmergestrategies 用于自定义选项的合并策略,vue已经预...

本文主要介绍了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 扩展地址(不需要*):

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

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就不再显示。

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