美文网首页
VueJS学习之旅 05

VueJS学习之旅 05

作者: 小A家的铭 | 来源:发表于2017-01-17 12:40 被阅读0次

上一节我们简要的介绍了一下初始化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<string>
    • 默认值:[]
    • 用法:
    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<number> }
    • 默认值:{}
    • 用法:
    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
    

相关文章

  • VueJS学习之旅 05

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

  • VueJS学习之旅 04

    前面探讨了一大堆,似乎都和如何使用VueJS没有直接关系,但是通过学习发布说明和guild构建的过程,还是对深入理...

  • VueJS学习之旅 06

    上一节我们结合代码和文档,详细介绍了Global Config,下面我们详细来看看Global API。 Glob...

  • VueJS学习之旅 07

    下面我就来看看Vue的核心构造器以及其实例的属性和方法。 Vue构造器 从 'src/core/index.js'...

  • VueJS学习之旅 08

    下面我就来看看VueJS中主要的组件选项,以及它们在Vue实例对象初始化过程中是如何完成属性合并的。 选项opti...

  • VueJS学习之旅 03

    前面两部分介绍了Vuejs的各个发布版本,以及它们的区别。也了解了VueJS源码的代码结构,以及基本的构建过程。下...

  • VueJS学习之旅 01

    近期VueJS非常的火,于是就想学学它是如何开发的。 以往学习一个新的框架,都是从官方的文档和一些大神的博文开始的...

  • VueJS学习之旅 02

    通过学习项目是如何build的,会有利于我们更好的了解整个项目的代码结构。以便于更好的学习项目的各个模块。打开pa...

  • Vue.js环境搭建

    简述 小弟刚刚开始写博客,学习VueJs也不久,开这个博客,只是为了多多学习和记录自己的 学习之旅,可能很多地方...

  • 2018-05-07

    坚持学习----我的青椒学习之旅 陕县2407卫新亚 2018-05-07 12:21 · 字数 170 · 阅读...

网友评论

      本文标题:VueJS学习之旅 05

      本文链接:https://www.haomeiwen.com/subject/sskmbttx.html