# 从入口开始
# Vue 的定义
- 文件
src/core/instance/index.js
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'
// 用 Function 实现的类
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
export default Vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 为何 Vue 不用 ES6 的 Class 去实现
- 方便代码的维护和管理, 后面的
xxxMixin(Vue)
将 Vue 当参数传入进行 prototype 的扩展,
Vue 按功能将这些扩展分散到各个模板中实现,方便维护和管理。
# initGlobalAPI(Vue)
文件
src/core/index.js
GlobalAPI 定义
declare interface GlobalAPI {
cid: number;
options: Object;
config: Config;
util: Object;
extend: (options: Object) => Function;
set: <T>(target: Object | Array<T>, key: string | number, value: T) => T;
delete: <T>(target: Object| Array<T>, key: string | number) => void;
nextTick: (fn: Function, context?: Object) => void | Promise<*>;
use: (plugin: Function | Object) => GlobalAPI;
mixin: (mixin: Object) => GlobalAPI;
compile: (template: string) => { render: Function, staticRenderFns: Array<Function> };
directive: (id: string, def?: Function | Object) => Function | Object | void;
component: (id: string, def?: Class<Component> | Object) => Class<Component>;
filter: (id: string, def?: Function) => Function | void;
observable: <T>(value: T) => T;
// allow dynamic method registration
[key: string]: any
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- 全局 API 的初始化
export function initGlobalAPI (Vue: GlobalAPI) {
// config
const configDef = {}
configDef.get = () => config
if (process.env.NODE_ENV !== 'production') {
configDef.set = () => {
warn(
'Do not replace the Vue.config object, set individual fields instead.'
)
}
}
Object.defineProperty(Vue, 'config', configDef)
// exposed util methods.
// NOTE: these are not considered part of the public API - avoid relying on
// them unless you are aware of the risk.
Vue.util = {
warn,
extend,
mergeOptions,
defineReactive
}
Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick
// 2.6 explicit observable API
Vue.observable = <T>(obj: T): T => {
observe(obj)
return obj
}
Vue.options = Object.create(null)
ASSET_TYPES.forEach(type => {
Vue.options[type + 's'] = Object.create(null)
})
// this is used to identify the "base" constructor to extend all plain-object
// components with in Weex's multi-instance scenarios.
Vue.options._base = Vue
extend(Vue.options.components, builtInComponents)
initUse(Vue)
initMixin(Vue)
initExtend(Vue)
initAssetRegisters(Vue)
}
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
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