# 以一个例子为线索
在上一节 [Vue构造函数](./2vue-constructor.md) 中,我们整理了完整的 `Vue` 构造函数,包括原型的设计和全局API的设计,并且我们专门为其整理了附录,目的是便于查看相应的方法和属性是在哪里被添加的,同时也让我们对 `Vue` 构造函数有一个大局观的认识。
从这一章节开始,我们将逐渐走进 `Vue`,我们采用一种由浅入深,由宽到窄的思路,一开始我们会从宏观的角度来看 `Vue` 是如何设计的,然后再一点点“追究”进去,进而逐步搞清楚 `Vue` 为什么这么设计。
而这一节,我们就致力于搞清楚:`Vue的思路`。我们将会从一个例子开始,这个例子非常简单,如下:
我们有如下模板:
```html
{{test}}
```
和这样一段 `js` 代码:
```js
var vm = new Vue({
el: '#app',
data: {
test: 1
}
})
```
这段 `js` 代码很简单,只是简单地调用了 `Vue`,传递了两个选项 `el` 以及 `data`。这段代码的最终效果就是在页面中渲染为如下 `DOM`:
```html
1
```
::: v-pre
其中
`{{ test }}`
被替换成了 `1`,并且当我们尝试修改 `data.test` 的值的时候
:::
```js
vm.$data.test = 2
// 或
vm.test = 2
```
那么页面的 `DOM` 也会随之变化为:
```html
2
```
看上去这个例子很简单(好吧,确实很简单),但其实这么简单的例子已经足够我们搞清楚 `Vue` 的思路了,当你明白 `Vue` 的思路之后,再去搞清楚其他的问题将会变得异常轻松。接下来我们就看看上面的例子中,到底发生了什么。
首先我们要找到当我们调用 `Vue` 构造函数的时候,第一句执行的代码是什么,所以我们要找到 `Vue` 的构造函数,还记得 `Vue` 的构造函数定义在哪里吗?不记得没关系,只要查阅一下 [附录/Vue构造函数整理-原型](../appendix/vue-prototype.md) 就ok了,`Vue` 的构造函数定义在 `core/instance/index.js` 文件中,我们找到它:
```js
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)
}
```
一目了然,当我们使用 `new` 操作符调用 `Vue` 的时候,第一句执行的代码就是 `this._init(options)` 方法,其中 `options` 是我们调用 `Vue` 构造函数时透传过来的,也就是说:
```js
options = {
el: '#app',
data: {
test: 1
}
}
```
既然如此,我们就找到 `_init` 方法,查阅 [附录/Vue构造函数整理-原型](../appendix/vue-prototype.md) 可知,`_init` 方法在 `src/core/instance/init.js` 文件被添加到 `Vue` 的原型上,下面我们就看看 `_init` 做了什么。
`_init` 方法的一开始,是这两句代码:
```js
const vm: Component = this
// a uid
vm._uid = uid++
```
首先声明了常量 `vm`,其值为 `this` 也就是当前这个 `Vue` 实例啦,然后在实例上添加了一个唯一标示:`_uid`,其值为 `uid`,`uid` 这个变量定义在 `initMixin` 方法的上面,初始化为 `0`,可以看到每次实例化一个 `Vue` 实例之后,`uid` 的值都会 `++`。
所以实际 `_uid` 就是一个 `Vue` 实例的实例属性,在之后的分析中,我们将会在很多地方遇到很多的实例属性被逐渐添加到 `Vue` 实例上,所以我们同样整理了一个附录:[附录/Vue实例的设计](../appendix/vue-ins.md) 来对 `Vue` 实例进行整理,就像我们对 `Vue` 构造函数的整理一样,大家可以在这里查阅。
回过头来继续看代码,接下来是这样一段:
```js
let startTag, endTag
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
startTag = `vue-perf-start:${vm._uid}`
endTag = `vue-perf-end:${vm._uid}`
mark(startTag)
}
// 中间的代码省略...
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
vm._name = formatComponentName(vm, false)
mark(endTag)
measure(`vue ${vm._name} init`, startTag, endTag)
}
```
上面的代码中,我省略了这两段代码中间的内容,我们暂且只看这两段代码。首先声明两个变量 `startTag` 和 `endTag`,然后这两段代码有一个共同点,即拥有相同的判断语句:
```js
if (process.env.NODE_ENV !== 'production' && config.performance && mark)
```
意思是:在非生产环境下,并且 `config.performance` 和 `mark` 都为真,那么才执行里面的代码,其中 `config.performance` 来自于 `core/config.js` 文件,我们知道,`Vue.config` 同样引用了这个对象,在 `Vue` 的官方文档中可以看到如下内容:

`Vue` 提供了全局配置 `Vue.config.performance`,我们通过将其设置为 `true`,即可开启性能追踪,你可以追踪四个场景的性能:
* 1、组件初始化(`component init`)
* 2、编译(`compile`),将模板(`template`)编译成渲染函数
* 3、渲染(`render`),其实就是渲染函数的性能,或者说渲染函数执行且生成虚拟DOM(`vnode`)的性能
* 4、打补丁(`patch`),将虚拟DOM渲染为真实DOM的性能
其中*组件初始化*的性能追踪就是我们在 `_init` 方法中看到的那样去实现的,其实现的方式就是在初始化的代码的开头和结尾分别使用 `mark` 函数打上两个标记,然后通过 `measure` 函数对这两个标记点进行性能计算。`mark` 和 `measure` 这两个函数可以在附录 [core/util 目录下的工具方法全解](../appendix/core-util.md) 中查看其作用和实现方式。
此时大家应该打开 `core/util/perf.js` 文件,然后对照着附录 [core/util 目录下的工具方法全解](../appendix/core-util.md) 搞清楚 `mark` 和 `measure` 这两个方法了,通过 `core/util/perf.js` 文件的代码我们可知,只有在非生产环境,且浏览器必须支持 `window.performance` API的情况下才会导出有用的 `mark` 和 `measure` 函数,也就是说,如果你的浏览器不支持 `window.performance` 那么在 `core/instance/init.js` 文件中导入的 `mark` 和 `measure` 就都是 `undefined`,也就不会执行 `if` 语句里面的内容。
那么大家可能比较关心如何查看追踪到的性能数据,很简单,如下图,打开 `chrome` 开发者工具即可查看:

如上图所示,这是我们本节这个小例子所追踪到的性能数据,在实际开发中 `Vue` 的各个阶段要做的工作肯定要复杂的多,如果能够很好的利用这些性能数据,将会为你提供很大的改进意见。
了解了这两段性能追踪的代码之后,我们再来看看这两段代码中间的代码,也就是被追踪性能的代码,如下:
```js
// a flag to avoid this being observed
vm._isVue = true
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
// expose real self
vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
```
上面的代码是那两段性能追踪的代码之间全部的内容,我们逐一分析,首先在 `Vue` 实例上添加 `_isVue` 属性,并设置其值为 `true`。目的是用来标识一个对象是 `Vue` 实例,即如果发现一个对象拥有 `_isVue` 属性并且其值为 `true`,那么就代表该对象是 `Vue` 实例。这样可以避免该对象被响应系统观测(其实在其他地方也有用到,但是宗旨都是一样的,这个属性就是用来告诉你:我不是普通的对象,我是Vue实例)。
再往下是这样一段代码:
```js
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
```
上面的代码是一段 `if` 分支语句,条件是:`options && options._isComponent`,其中 `options` 就是我们调用 `Vue` 时传递的参数选项,但 `options._isComponent` 是什么鬼?我们知道在本节的例子中我们的 `options` 对象只有两个属性 `el` 和 `data`,并且在 `Vue` 的官方文档中你也找不到关于 `_isComponent` 这个选项的介绍,其实我相信大部分同学都已经知道,这是一个内部选项。而事实也确实是这样,这个内部选项是在 `Vue` 创建组件的时候才会有的,为了不牵涉太多内容导致大家头晕,这里暂时不介绍其相关内容。
根据本节的例子,上面的代码必然会走 `else` 分支,也就是这段代码:
```js
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
```
这段代码在 `Vue` 实例上添加了 `$options` 属性,在 `Vue` 的官方文档中,你能够查看到 `$options` 属性的作用,这个属性用于当前 `Vue` 的初始化,什么意思呢?大家要注意我们现在的阶段处于 `_init()` 方法中,在 `_init()` 方法的内部大家可以看到一系列 `init*` 的方法,比如:
```js
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
```
而这些方法才是真正起作用的一些初始化方法,大家可以找到这些方法看一看,在这些初始化方法中,无一例外的都使用到了实例的 `$options` 属性,即 `vm.$options`。所以 `$options` 这个属性的的确确是用于 `Vue` 实例初始化的,只不过在初始化之前,我们需要一些手段来产生 `$options` 属性,而这就是 `mergeOptions` 函数的作用,接下来我们就来看看 `mergeOptions` 都做了些什么,又有什么意义。