Vue.config是一个对象，包含Vue的全局配置,可以在启动应用之前修改下列属性，如下:

ptionMergeStrategies        ;自定义合并策略的选项
silent               　　　 ;是否关闭警告，默认为false,如果设置true，那么将不会有各种报错
productionTip          　　 ;开发模式下是否在控制台显示生产提示，即一条You are running Vue in development mode提示，设置false,即可关闭该提示
devtools            　　　　;是否允许vue-devtools(Vue调试神器)检查代码，浏览器环境下为true
performance                 ;是否开启性能追踪，只有在开发模式和支持 performance.mark API 的浏览器上才有效
errorHandler                ;指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。
warnHandler                 ;Vue 的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效，在生产环境下它会被忽略。
ignoredElements             ;忽略某些自定义元素
keyCodes                    ;给v-on 自定义键位别名。
isReservedTag               ;保留标签，如有，则这些标签不能注册成为组件

例如当我们直接引入vue的js文件时:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>

    <title>Document</title>

</head>

<body>

</body>

</html>

在控制台会输出提示信息，如下:

writer by:大沙漠 QQ:22969969

在开发模式下，会输出一条消息提示，如果我们设置 productionTip 为false即可关闭这条提示,如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>

    <title>Document</title>

</head>

<body>

<script>Vue.config.productionTip=false</script>

</body>

</html>

、在Vue的官网也是设置productionTip配置属性为false实现关闭消息提示的：

注意:我们只能修改vue.config里的某个属性，而不能直接修改config,这样要报错的，如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>

    <title>Document</title>

</head>

<body>

<script>Vue.config={productionTip:false}</script>

</body>

</html>

报错:[Vue warn]: Do not replace the Vue.config object, set individual fields instead.

源码分析

Vue内部会执行一个initGlobalAPI(Vue)函数，Vue就是匿名函数表达式里的Vue函数对象(不懂可以回头看看第一节代码结构),如下:

function initGlobalAPI (Vue) {      //在第5016行

  // config

  var configDef = {};

  configDef.get = function () { return config; };           //Vue.config会获取config全局变量

  {

    configDef.set = function () {                           //设置Vue.config时直接报错，即不允许设置Vue.config值

      warn(

        'Do not replace the Vue.config object, set individual fields instead.'

      );

    };

  }

  Object.defineProperty(Vue, 'config', configDef);          //通过ES5的defineProperty设置Vue的config的访问器属性，获取Vue.config时会执行configDef.get函数，设置Vue.config时会执行configDef.set函数

  /*中间省略*/

}

config是一个全局对象，定义在vue.js开始的361行，如下:

var config = ({     //第361行

  /**

   * Option merge strategies (used in core/util/options)

   */

  // $flow-disable-line

  optionMergeStrategies: Object.create(null),

  /**

   * Whether to suppress warnings.

   */

  silent: false,

  /**

   * Show production mode tip message on boot?

   */

  productionTip: "development" !== 'production',      //这就是刚刚我们测试的例子对应的属性

  /**

   * Whether to enable devtools

   */

  devtools: "development" !== 'production',

  /**

   * Whether to record perf

   */

  /*其余省略*/

})

Vue.js 源码分析(二) 基础篇 全局配置的更多相关文章

  1. Vue.js 源码分析(十三) 基础篇 组件 props属性详解

    父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...

  2. Vue.js 源码分析(四) 基础篇 响应式原理 data属性

    官网对data属性的介绍如下: 意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方 ...

  3. Vue.js 源码分析(三) 基础篇 模板渲染 el、emplate、render属性详解

    Vue有三个属性和模板有关,官网上是这样解释的: el ;提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 template ;一个字符串模板作为 Vue 实例的标识使用.模板将会 ...

  4. Vue.js 源码分析(九) 基础篇 生命周期详解

    先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated   .beforeDes ...

  5. Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解

    先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和 ...

  6. Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解

    先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...

  7. Vue.js 源码分析(十一) 基础篇 过滤器 filters属性详解

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...

  8. Vue.js 源码分析(十) 基础篇 ref属性详解

    ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例,例如: ...

  9. Vue.js 源码分析(五) 基础篇 方法 methods属性详解

    methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head&g ...

随机推荐

  1. 一个有用的排序函数,array_multisort(),下面的一个用法是根据二维数组里的一个字段值的大小,对该二维数组进行重新排序

    从二维数组$cashes中取出一列 'store_id'(二维数组中的每个一维数组都有的字段),按照这个的大小排序,对二维数组$caches里面的一维数组进行重新排序 实际应用如下 想让相同部门的排在 ...

  2. 用.net core实现反向代理中间件

    最近在将一些项目的rest api迁移到.net core中,最开始是用的Nginx做反向代理,将已经完成切换的部分切入系统,如下图所示: 由于迁移过程中也在进行代码重构,需要经常比较频繁的测试,以保 ...

  3. TreeViewItem节点添加图标后再加header

    1.需要实现的效果如图 2.解决方案 1).给TreeViewItem中添加children,children为包含一个stackpanel,在stackpanel中包含Image和TextBlock ...

  4. 全栈工程师对Python面试中is和==区别的详细解说！看完真的学到了！

    面试实习生的时候,当问到 is 和 == 的区别时,很多同学都答不上来,搞不清两者什么时候返回一致,什么时候返回不一致.本文我们来看一下这两者的区别. 我们先来看几个例子: a = "hel ...

  5. 用Python进行数据清洗，这7种方法你一定要掌握

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者 | 常国珍.赵仁乾.张秋剑 来源 |<Python数据科学:技术 ...

  6. 安全意识第三期丨关于高速ETC办理的这些新骗局，速看！

    近期,最火爆的莫过于ETC了. 不仅各大银行,甚至微信和支付宝都推出了办理服务. 虽说更加便捷了,却也带来了安全隐患. 下面这个案例,大家一定要注意,已经有很多车主“中招”,落入了骗子的圈套. 注意: ...

  7. arcgis api 4.x for js 结合 react 入门开发系列react全家桶实现加载天地图（附源码下载）

    基于两篇react+arcgis的文章介绍,相信大家也能体会两者的开发区别了.在“初探篇”中作者也讲述了自己的选择,故废话不多说,本篇带大家体验在@arcgis/webpack-plugin环境下,使 ...

  8. 控件类——Button、UIControlState状态、title及其属性

    封装: 封装按钮:1.有提示文字 —>UILable 2.并且可以点击 —> UIControl UIButton:是一个按钮(系统已经把UIControl封装好了).  里面可以放文字. ...

  9. 软工个人项目（Java实现）

    一. Github地址: https://github.com/RuiBingo/PersonalWork 二.个人PSP表格: PSP2.1 PSP阶段 预估耗时(分钟) 实际耗时(分钟) Plan ...

  10. 论文学习-wlg-基于二维材料的肖特基异质结构的通用尺度定律

    目录 主要公式: 各个段落的内容 第一页 第二页 第三页 名词的含义 功函数: 电子亲和力 肖特基势垒 肖特基二极管的原理 非相对论性电子气:未知 Rashba自旋电子系统: 参考链接: 主要公式: ...