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

  • extends&mixins&newVue最终合并后的 customOption 的选项值
  • devtools

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

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

    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

    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')的各个阶段花费的时间:

    在 IE11 中查看

    productionTip(2.2.0+)

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

    内容版权声明:除非注明,否则皆为本站原创文章。

    转载注明出处:http://www.heiqu.com/607.html