Vue项目的构建是从new Vue(options)开始的,也就是说Vue是提供了一个构造器来供项目实例化。下面记录一下Vue构造器的结构和功能。

Vue构造器

定义
core/instance/index.jsindex.js
1
2
// 构造函数执行初始化任务
function Vue (options) { this._init(options)}
mixin init
core/instance/init.jsinit.js
1
2
// 初始化方法
Vue.prototype._init = function (options?: Object) {}
mixin state
core/instance/state.jsstate.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// vm._data的代理属性
Vue.prototype.$data = {get: function ( return this._data)}

// vm._props的代理属性
Vue.prototype.$props = {get: function ( return this._props)}

// 设置对象的属性值
Vue.prototype.$set = function (target: Array<any> | Object, key: any, val: any): any {}

// 删除对象的属性
Vue.prototype.$delete = function (target: Array<any> | Object, key: any) {}

// 监听表达式依赖的值
Vue.prototype.$watch = function (expOrFn: string | Function, cb: any, options?: Object): Function {}
mixin events
core/instance/events.jsevents.js
1
2
3
4
5
6
7
8
9
10
11
// 注册事件
Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {}

// 注册一次性事件
Vue.prototype.$once = function (event: string, fn: Function): Component {}

// 注销事件
Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {}

// 触发事件
Vue.prototype.$emit = function (event: string): Component {}
mixin lifecycle
core/instance/lifecycle.jslifecycle.js
1
2
3
4
5
6
7
8
// 更新vm中的VNode
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {}

// 强制更新(触发vm._watchers的更新操作)
Vue.prototype.$forceUpdate = function () {}

// 销毁vm
Vue.prototype.$destroy = function () {}
mixin render
core/instance/render.jsrender.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 延迟任务的执行
Vue.prototype.$nextTick = function (fn: Function) {}

// 渲染
Vue.prototype._render = function (): VNode {}

// 一些工具函数
Vue.prototype._o = markOnce
Vue.prototype._n = toNumber
Vue.prototype._s = toString
Vue.prototype._l = renderList
Vue.prototype._t = renderSlot
Vue.prototype._q = looseEqual
Vue.prototype._i = looseIndexOf
Vue.prototype._m = renderStatic
Vue.prototype._f = resolveFilter
Vue.prototype._k = checkKeyCodes
Vue.prototype._b = bindObjectProps
Vue.prototype._v = createTextVNode
Vue.prototype._e = createEmptyVNode
Vue.prototype._u = resolveScopedSlots
global api
core/global-api/index.jsindex.js
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
// 通过get获取配置信息
Vue.config = {
get: () => {return config}
}

// 提供工具函数
Vue.util = {
warn,
extend,
mergeOptions,
defineReactive
}

// 提供设置属性、删除属性、异步执行任务的API
Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick

// 设置options
Vue.options = {
component: {KeepAlive},
directive: {},
filter: {},
_base: Vue
}

// 安装Vue plugin
Vue.use = function (plugin: Function | Object) {}

// 混入mixin中的对象到vm.options中
Vue.mixin = function (mixin: Object) {}

// 生成子Vue构造器
Vue.cid = 0
Vue.extend = function (extendOptions: Object): Function {}

// 获取或定义component/directive/filter
Vue.component = function (id: string, definition: Function | Object): Function | Object | void {};
Vue.directive = function (id: string, definition: Function | Object): Function | Object | void {};
Vue.filter = function (id: string, definition: Function | Object): Function | Object | void {};

其中config中有如下配置

core/config.jsconfig.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var Type config = {
// user
optionMergeStrategies: { [key: string]: Function };
silent: boolean;
productionTip: boolean;
performance: boolean;
devtools: boolean;
errorHandler: ?(err: Error, vm: Component, info: string) => void;
ignoredElements: Array<string>;
keyCodes: { [key: string]: number | Array<number> };

// platform
isReservedTag: (x?: string) => boolean;
isReservedAttr: (x?: string) => boolean;
parsePlatformTagName: (x: string) => string;
isUnknownElement: (x?: string) => boolean;
getTagNamespace: (x?: string) => string | void;
mustUseProp: (tag: string, type: ?string, name: string) => boolean;

// legacy
_lifecycleHooks: Array<string>;
}
platform
platforms/web/runtime-with-compiler.jsruntime-with-compiler.js
1
2
3
4
5
6
7
8
// 更新元素
Vue.prototype.__patch__ = function (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm): DomElement {}

// 挂载元素
Vue.prototype.$mount = function (el?: string | Element, hydrating?: boolean): Component {}

// 编译模板,生成渲染函数
Vue.compile = (template: string, options?: CompilerOptions, vm?: Component): CompiledFunctionResult {}
other
core/index.jsindex.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 标识是否处于服务器端渲染
Object.defineProperty(Vue.prototype, '$isServer', {
get: isServerRendering
})

// 暴露$vnode的ssrContext上下文
Object.defineProperty(Vue.prototype, '$ssrContext', {
get () {
/* istanbul ignore next */
return this.$vnode.ssrContext
}
})

// 记录Vue的版本
Vue.version = '__VERSION__'