vue源码分析(七) 全局配置
Robin 10/7/2018 vue源码分析面试
# 1. 概述
在—— vue源码分析(三) 整体架构 (opens new window) 中我们已经分析过了Vue源码的整理架构流程，分析Vue构造函数时，在全局AIP初始化的地方我们没有分析，下面我们具体看一下 initGlobalAPI (Vue) 源码。
# 2. initGlobalAPI
源码目录: src/core/global-api/index.js
/*...*/
export function initGlobalAPI (Vue: GlobalAPI) {
// config
const configDef = {}
configDef.get = () => config // Vue.config 获取 config 全局变量
if (process.env.NODE_ENV !== 'production') {
configDef.set = () => { // 设置Vue.config时直接报错，即不允许设置Vue.config值
warn(
'Do not replace the Vue.config object, set individual fields instead.'
)
}
}
// 通过ES5的defineProperty设置Vue的config的访问器属性
// 获取Vue.config时会执行configDef.get函数
// 设置Vue.config时会执行configDef.set函数
Object.defineProperty(Vue, 'config', configDef)
/*...*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
initGlobalAPI 主要是对全局 API 的初始化，这里我们摘出这章主要分析的代码，其他的我们会在后面章节中，逐个分析。
这段代码主要是把全局配置绑定到 Vue 构造函数上，属于静态属性。执行这段代码主要做了一下几件事：
(1)、定义一个 configDef。
(2)、设置 configDef 的 get 属性，获取全局配置。
(3)、在开发环境，设置 configDef 的 set 属性，当用户手动修改配置时抱警告。
(4)、通过 ES5 的 defineProperty 设置 Vue 的 config 的访问器属性。
分析源码我们可以知道，config 属性是只读的，不允许用户覆盖，下面我们就对 config 进行详细分析。
# 3. config
Vue.config 是一个全局对象，包含 Vue 的全局配置,可以在启动应用之前修改 config 里面的属性值。
源码目录: src/core/config.js
export default ({
/**
* Option merge strategies (used in core/util/options)
*/
// $flow-disable-line
// 自定义合并策略的选项
optionMergeStrategies: Object.create(null),
/**
* Whether to suppress warnings.
*/
// 是否关闭警告，默认为false，如果设置为true，那么将不会有报错信息
silent: false,
/**
* Show production mode tip message on boot?
*/
// 开发模式下是否在控制台显示生产提示，即一条 `You are running Vue in development mode` 提示，设置为false，即可关闭该提示
productionTip: process.env.NODE_ENV !== 'production',
/**
* Whether to enable devtools
*/
// 是否允许 `Vue-devtools` (Vue调试工具)检查代码，浏览器环境下为true
devtools: process.env.NODE_ENV !== 'production',
/**
* Whether to record perf
*/
// 是否开启性能追踪，只是在开发默认和支持 `performance.mark API` 的浏览器上才会有效
performance: false,
/**
* Error handler for watcher errors
*/
// 指定组件的渲染和观察期间未捕获错误的处理函数，这个处理函数被调用时，可获取错误信息和 Vue 实例
errorHandler: null,
/**
* Warn handler for watcher warns
*/
// Vue 的运行时警告赋予一个自定义处理函数，注意这只会在开发环境下生效，在生产环境下它会被忽略
warnHandler: null,
/**
* Ignore certain custom elements
*/
// 忽略某些自定义元素
ignoredElements: [],
/**
* Custom user key aliases for v-on
*/
// $flow-disable-line
// 给 v-on 自定义健位别名
keyCodes: Object.create(null),
/**
* Check if a tag is reserved so that it cannot be registered as a
* component. This is platform-dependent and may be overwritten.
*/
// 保留标签，如有，则这些标签不能注册为组件
isReservedTag: no,
/**
* Check if an attribute is reserved so that it cannot be used as a component
* prop. This is platform-dependent and may be overwritten.
*/
// 保留属性
isReservedAttr: no,
/**
* Check if a tag is an unknown element.
* Platform-dependent.
*/
// 未知标签元素
isUnknownElement: no,
/**
* Get the namespace of an element
*/
// 获取元素的命名空间
getTagNamespace: noop,
/**
* Parse the real tag name for the specific platform.
*/
// 解析特定平台的真实标签名称
parsePlatformTagName: identity,
/**
* Check if an attribute must be bound using property, e.g. value
* Platform-dependent.
*/
// 检查属性
mustUseProp: no,
/**
* Perform updates asynchronously. Intended to be used by Vue Test Utils
* This will significantly reduce performance if set to false.
*/
// 异步执行更新
async: true,
/**
* Exposed for legacy reasons
*/
_lifecycleHooks: LIFECYCLE_HOOKS
}: Config)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
对于 config 配置所有的属性值在上面代码的注释中已经详细分析了，这里就不做重复说明。