VueJS学习之旅 05

上一节我们简要的介绍了一下初始化Global API的过程，下面我们详细来看看。

---

Global Config

OK，结合官方文档和代码细节，我们来看看这些 Global Config的具体用法：

• Vue.config.optionMergeStrategies

  文档说明：

  • 类型：{ [key: string]: Function }
  • 默认值：{}
  • 用法：

  Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {}
  const Profile = Vue.extend({_my_option: 1})
  

  自定义合并策略的选项。合并策略选项分别接受第一个参数作为父实例，第二个参数为子实例，Vue实例上下文被作为第三个参数传入。

  源码中与 Vue.config.optionMergeStrategies 相关的主要有两个文件

  // src/core/config.js
  // src/core/util/options.js
  

  1. 'src/core/config.js' 中给定了默认值。
  2. 'src/core/util/options.js' 之中有个 mergeOptions 函数，是用来合并属性的。
     具体看看细节，它会根据具体的合并策略合并属性：
     如果某一属性存在自定义策略，则使用自定义策略给定的方法进行合并。
     如果不存在自定义策略，则是用默认策略：如果子实例有值则使用该值，子实例没有则使用父实例的值。
  3. 该文件之中还预定义了一些合并策略供内部使用，主要针对vue的保留字 :
     [
     'el',
     'propsData',
     'data',
     'beforeCreate',
     'created',
     'beforeMount',
     'mounted',
     'beforeUpdate',
     'updated',
     'beforeDestroy',
     'destroyed',
     'activated',
     'deactivated',
     'components',
     'directives',
     'filters',
     'watch',
     'props',
     'methods',
     'computed'
     ]

• Vue.config.silent

  文档说明：

  • 类型：boolean
  • 默认值：false
  • 用法：

  Vue.config.silent = true
  

  取消 Vue 所有的日志与警告。

  源码中与 Vue.config.silent 相关的主要有两个文件

  // src/core/config.js
  // src/core/util/debug.js
  

  1. 'src/core/config.js' 中给定了默认值。
  2. 'src/core/util/debug.js' 之中有个供全局使用的 warn 函数，会是用这个值来判断是否输出警告信息。

• Vue.config.devtools

  文档说明：

  • 类型：boolean
  • 默认值：true (生产版为 false)
  • 用法：

  //务必在加载 Vue 之后，立即同步设置以下内容
  Vue.config.devtools = true
  

  配置是否允许 vue-devtools 检查代码。开发版本默认为 true，生产版本默认为 false。生产版本设为 true 可以启用检查。

  源码中与 Vue.config.devtools 相关的主要有4个文件

  // src/core/config.js
  // src/core/observer/scheduler.js
  // src/entries/web-runtime.js
  // src/server/render.js
  

  1. 'src/core/config.js' 中给定了默认值。
  2. 其它文件中，主要使用这个值来判断是否启用真正的 devtools 来触发调试事件或打印调试信息。

• Vue.config.errorHandler

  文档说明：

  • 类型：Function
  • 默认值：默认抛出错误
  • 用法：

  Vue.config.errorHandler = function (err, vm) { }
  

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

  源码中与 Vue.config.errorHandler 相关的主要有3个文件

  // src/core/config.js
  // src/core/instance/render.js
  // src/core/observer/watcher.js
  

  1. 'src/core/config.js' 中给定了默认值。
  2. 其它文件中，主要使用给定的错误处理函数来进行自定义错误处理。

• Vue.config.ignoredElements

  文档说明：

  • 类型：Array
  • 默认值：[]
  • 用法：

  Vue.config.ignoredElements = [ 'my-custom-web-component', 'another-web-component' ]
  

  须使 Vue 忽略在 Vue 之外的自定义元素 (e.g., 使用了 Web Components APIs)。否则，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于 Unknown custom element 的警告。

  源码中与 Vue.config.ignoredElements 相关的主要有2个文件

  // src/core/config.js
  // src/core/vdom/patch.js
  

  1. 'src/core/config.js' 中给定了默认值。
  2. 'src/core/vdom/patch.js'文件中，createElm 函数使用该值。即在vue在解析tag标签时，是否忽略给定的 elements 。

• Vue.config.keyCodes

  文档说明：

  • 类型：{ [key: string]: number | Array }
  • 默认值：{}
  • 用法：

  Vue.config.keyCodes = {
    v: 86,
    f1: 112,
    mediaPlayPause: 179,
    up: [38, 87]
  }
  

  给 v-on 自定义键位别名。

  源码中与 Vue.config.keyCodes 相关的主要有4个文件

  // src/core/config.js
  // src/core/instance/proxy.js
  // src/core/instance/render.js
  // src/compiler/codegen/events.js