9 | {{ message }}
10 |
11 | ```
12 |
13 | ```js
14 | var app = new Vue({
15 | el: '#app',
16 | data: {
17 | message: 'Hello Vue!'
18 | }
19 | })
20 | ```
21 |
22 | 最终它会在页面上渲染出 `Hello Vue`。接下来，我们会从源码角度来分析 Vue 是如何实现的，分析过程会以主线代码为主，重要的分支逻辑会放在之后单独分析。数据驱动还有一部分是数据更新驱动视图变化，这一块内容我们也会在之后的章节分析，这一章我们的目标是弄清楚模板和数据如何渲染成最终的 DOM。
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/docs/data-driven/mounted.md:
--------------------------------------------------------------------------------
1 | # Vue 实例挂载的实现
2 |
3 | Vue 中我们是通过 `$mount` 实例方法去挂载 `vm` 的，`$mount` 方法在多个文件中都有定义，如 `src/platform/web/entry-runtime-with-compiler.js`、`src/platform/web/runtime/index.js`、`src/platform/weex/runtime/index.js`。因为 `$mount` 这个方法的实现是和平台、构建方式都相关的。接下来我们重点分析带 `compiler` 版本的 `$mount` 实现，因为抛开 webpack 的 vue-loader，我们在纯前端浏览器环境分析 Vue 的工作原理，有助于我们对原理理解的深入。
4 |
5 | `compiler` 版本的 `$mount` 实现非常有意思，先来看一下 `src/platform/web/entry-runtime-with-compiler.js` 文件中定义：
6 |
7 | ```js
8 | const mount = Vue.prototype.$mount
9 | Vue.prototype.$mount = function (
10 | el?: string | Element,
11 | hydrating?: boolean
12 | ): Component {
13 | el = el && query(el)
14 |
15 | /* istanbul ignore if */
16 | if (el === document.body || el === document.documentElement) {
17 | process.env.NODE_ENV !== 'production' && warn(
18 | `Do not mount Vue to or - mount to normal elements instead.`
19 | )
20 | return this
21 | }
22 |
23 | const options = this.$options
24 | // resolve template/el and convert to render function
25 | if (!options.render) {
26 | let template = options.template
27 | if (template) {
28 | if (typeof template === 'string') {
29 | if (template.charAt(0) === '#') {
30 | template = idToTemplate(template)
31 | /* istanbul ignore if */
32 | if (process.env.NODE_ENV !== 'production' && !template) {
33 | warn(
34 | `Template element not found or is empty: ${options.template}`,
35 | this
36 | )
37 | }
38 | }
39 | } else if (template.nodeType) {
40 | template = template.innerHTML
41 | } else {
42 | if (process.env.NODE_ENV !== 'production') {
43 | warn('invalid template option:' + template, this)
44 | }
45 | return this
46 | }
47 | } else if (el) {
48 | template = getOuterHTML(el)
49 | }
50 | if (template) {
51 | /* istanbul ignore if */
52 | if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
53 | mark('compile')
54 | }
55 |
56 | const { render, staticRenderFns } = compileToFunctions(template, {
57 | shouldDecodeNewlines,
58 | shouldDecodeNewlinesForHref,
59 | delimiters: options.delimiters,
60 | comments: options.comments
61 | }, this)
62 | options.render = render
63 | options.staticRenderFns = staticRenderFns
64 |
65 | /* istanbul ignore if */
66 | if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
67 | mark('compile end')
68 | measure(`vue ${this._name} compile`, 'compile', 'compile end')
69 | }
70 | }
71 | }
72 | return mount.call(this, el, hydrating)
73 | }
74 | ```
75 | 这段代码首先缓存了原型上的 `$mount` 方法，再重新定义该方法，我们先来分析这段代码。首先，它对 `el` 做了限制，Vue 不能挂载在 `body`、`html` 这样的根节点上。接下来的是很关键的逻辑 —— 如果没有定义 `render` 方法，则会把 `el` 或者 `template` 字符串转换成 `render` 方法。这里我们要牢记，在 Vue 2.0 版本中，所有 Vue 的组件的渲染最终都需要 `render` 方法，无论我们是用单文件 .vue 方式开发组件，还是写了 `el` 或者 `template` 属性，最终都会转换成 `render` 方法，那么这个过程是 Vue 的一个“在线编译”的过程，它是调用 `compileToFunctions` 方法实现的，编译过程我们之后会介绍。最后，调用原先原型上的 `$mount` 方法挂载。
76 |
77 | 原先原型上的 `$mount` 方法在 `src/platform/web/runtime/index.js` 中定义，之所以这么设计完全是为了复用，因为它是可以被 `runtime only` 版本的 Vue 直接使用的。
78 |
79 | ```js
80 | // public mount method
81 | Vue.prototype.$mount = function (
82 | el?: string | Element,
83 | hydrating?: boolean
84 | ): Component {
85 | el = el && inBrowser ? query(el) : undefined
86 | return mountComponent(this, el, hydrating)
87 | }
88 | ```
89 |
90 | `$mount` 方法支持传入 2 个参数，第一个是 `el`，它表示挂载的元素，可以是字符串，也可以是 DOM 对象，如果是字符串在浏览器环境下会调用 `query` 方法转换成 DOM 对象的。第二个参数是和服务端渲染相关，在浏览器环境下我们不需要传第二个参数。
91 |
92 | `$mount` 方法实际上会去调用 `mountComponent` 方法，这个方法定义在 `src/core/instance/lifecycle.js` 文件中：
93 |
94 | ```js
95 | export function mountComponent (
96 | vm: Component,
97 | el: ?Element,
98 | hydrating?: boolean
99 | ): Component {
100 | vm.$el = el
101 | if (!vm.$options.render) {
102 | vm.$options.render = createEmptyVNode
103 | if (process.env.NODE_ENV !== 'production') {
104 | /* istanbul ignore if */
105 | if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
106 | vm.$options.el || el) {
107 | warn(
108 | 'You are using the runtime-only build of Vue where the template ' +
109 | 'compiler is not available. Either pre-compile the templates into ' +
110 | 'render functions, or use the compiler-included build.',
111 | vm
112 | )
113 | } else {
114 | warn(
115 | 'Failed to mount component: template or render function not defined.',
116 | vm
117 | )
118 | }
119 | }
120 | }
121 | callHook(vm, 'beforeMount')
122 |
123 | let updateComponent
124 | /* istanbul ignore if */
125 | if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
126 | updateComponent = () => {
127 | const name = vm._name
128 | const id = vm._uid
129 | const startTag = `vue-perf-start:${id}`
130 | const endTag = `vue-perf-end:${id}`
131 |
132 | mark(startTag)
133 | const vnode = vm._render()
134 | mark(endTag)
135 | measure(`vue ${name} render`, startTag, endTag)
136 |
137 | mark(startTag)
138 | vm._update(vnode, hydrating)
139 | mark(endTag)
140 | measure(`vue ${name} patch`, startTag, endTag)
141 | }
142 | } else {
143 | updateComponent = () => {
144 | vm._update(vm._render(), hydrating)
145 | }
146 | }
147 |
148 | // we set this to vm._watcher inside the watcher's constructor
149 | // since the watcher's initial patch may call $forceUpdate (e.g. inside child
150 | // component's mounted hook), which relies on vm._watcher being already defined
151 | new Watcher(vm, updateComponent, noop, {
152 | before () {
153 | if (vm._isMounted) {
154 | callHook(vm, 'beforeUpdate')
155 | }
156 | }
157 | }, true /* isRenderWatcher */)
158 | hydrating = false
159 |
160 | // manually mounted instance, call mounted on self
161 | // mounted is called for render-created child components in its inserted hook
162 | if (vm.$vnode == null) {
163 | vm._isMounted = true
164 | callHook(vm, 'mounted')
165 | }
166 | return vm
167 | }
168 | ```
169 | 从上面的代码可以看到，`mountComponent` 核心就是先实例化一个渲染`Watcher`，在它的回调函数中会调用 `updateComponent` 方法，在此方法中调用 `vm._render` 方法先生成虚拟 Node，最终调用 `vm._update` 更新 DOM。
170 |
171 | `Watcher` 在这里起到两个作用，一个是初始化的时候会执行回调函数，另一个是当 vm 实例中的监测的数据发生变化的时候执行回调函数，这块儿我们会在之后的章节中介绍。
172 |
173 | 函数最后判断为根节点的时候设置 `vm._isMounted` 为 `true`， 表示这个实例已经挂载了，同时执行 `mounted` 钩子函数。 这里注意 `vm.$vnode` 表示 Vue 实例的父虚拟 Node，所以它为 `Null` 则表示当前是根 Vue 的实例。
174 |
175 |
176 | ## 总结
177 |
178 | `mountComponent` 方法的逻辑也是非常清晰的，它会完成整个渲染工作，接下来我们要重点分析其中的细节，也就是最核心的 2 个方法：`vm._render` 和 `vm._update`。
179 |
--------------------------------------------------------------------------------
/docs/data-driven/new-vue.md:
--------------------------------------------------------------------------------
1 | # new Vue 发生了什么
2 |
3 | 从入口代码开始分析，我们先来分析 `new Vue` 背后发生了哪些事情。我们都知道，`new` 关键字在 Javascript 语言中代表实例化是一个对象，而 `Vue` 实际上是一个类，类在 Javascript 中是用 Function 来实现的，来看一下源码，在`src/core/instance/index.js` 中。
4 |
5 | ```js
6 | function Vue (options) {
7 | if (process.env.NODE_ENV !== 'production' &&
8 | !(this instanceof Vue)
9 | ) {
10 | warn('Vue is a constructor and should be called with the `new` keyword')
11 | }
12 | this._init(options)
13 | }
14 | ```
15 | 可以看到 `Vue` 只能通过 new 关键字初始化，然后会调用 `this._init` 方法， 该方法在 `src/core/instance/init.js` 中定义。
16 |
17 | ```js
18 | Vue.prototype._init = function (options?: Object) {
19 | const vm: Component = this
20 | // a uid
21 | vm._uid = uid++
22 |
23 | let startTag, endTag
24 | /* istanbul ignore if */
25 | if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
26 | startTag = `vue-perf-start:${vm._uid}`
27 | endTag = `vue-perf-end:${vm._uid}`
28 | mark(startTag)
29 | }
30 |
31 | // a flag to avoid this being observed
32 | vm._isVue = true
33 | // merge options
34 | if (options && options._isComponent) {
35 | // optimize internal component instantiation
36 | // since dynamic options merging is pretty slow, and none of the
37 | // internal component options needs special treatment.
38 | initInternalComponent(vm, options)
39 | } else {
40 | vm.$options = mergeOptions(
41 | resolveConstructorOptions(vm.constructor),
42 | options || {},
43 | vm
44 | )
45 | }
46 | /* istanbul ignore else */
47 | if (process.env.NODE_ENV !== 'production') {
48 | initProxy(vm)
49 | } else {
50 | vm._renderProxy = vm
51 | }
52 | // expose real self
53 | vm._self = vm
54 | initLifecycle(vm)
55 | initEvents(vm)
56 | initRender(vm)
57 | callHook(vm, 'beforeCreate')
58 | initInjections(vm) // resolve injections before data/props
59 | initState(vm)
60 | initProvide(vm) // resolve provide after data/props
61 | callHook(vm, 'created')
62 |
63 | /* istanbul ignore if */
64 | if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
65 | vm._name = formatComponentName(vm, false)
66 | mark(endTag)
67 | measure(`vue ${vm._name} init`, startTag, endTag)
68 | }
69 |
70 | if (vm.$options.el) {
71 | vm.$mount(vm.$options.el)
72 | }
73 | }
74 | ```
75 |
76 | Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。
77 |
78 | ## 总结
79 |
80 | Vue 的初始化逻辑写的非常清楚，把不同的功能逻辑拆成一些单独的函数执行，让主线逻辑一目了然，这样的编程思想是非常值得借鉴和学习的。
81 |
82 | 由于我们这一章的目标是弄清楚模板和数据如何渲染成最终的 DOM，所以各种初始化逻辑我们先不看。在初始化的最后，检测到如果有 `el` 属性，则调用 `vm.$mount` 方法挂载 `vm`，挂载的目标就是把模板渲染成最终的 DOM，那么接下来我们来分析 Vue 的挂载过程。
--------------------------------------------------------------------------------
/docs/data-driven/render.md:
--------------------------------------------------------------------------------
1 | # render
2 |
3 | Vue 的 `_render` 方法是实例的一个私有方法，它用来把实例渲染成一个虚拟 Node。它的定义在 `src/core/instance/render.js` 文件中：
4 |
5 | ```js
6 | Vue.prototype._render = function (): VNode {
7 | const vm: Component = this
8 | const { render, _parentVnode } = vm.$options
9 |
10 | // reset _rendered flag on slots for duplicate slot check
11 | if (process.env.NODE_ENV !== 'production') {
12 | for (const key in vm.$slots) {
13 | // $flow-disable-line
14 | vm.$slots[key]._rendered = false
15 | }
16 | }
17 |
18 | if (_parentVnode) {
19 | vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject
20 | }
21 |
22 | // set parent vnode. this allows render functions to have access
23 | // to the data on the placeholder node.
24 | vm.$vnode = _parentVnode
25 | // render self
26 | let vnode
27 | try {
28 | vnode = render.call(vm._renderProxy, vm.$createElement)
29 | } catch (e) {
30 | handleError(e, vm, `render`)
31 | // return error render result,
32 | // or previous vnode to prevent render error causing blank component
33 | /* istanbul ignore else */
34 | if (process.env.NODE_ENV !== 'production') {
35 | if (vm.$options.renderError) {
36 | try {
37 | vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
38 | } catch (e) {
39 | handleError(e, vm, `renderError`)
40 | vnode = vm._vnode
41 | }
42 | } else {
43 | vnode = vm._vnode
44 | }
45 | } else {
46 | vnode = vm._vnode
47 | }
48 | }
49 | // return empty vnode in case the render function errored out
50 | if (!(vnode instanceof VNode)) {
51 | if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
52 | warn(
53 | 'Multiple root nodes returned from render function. Render function ' +
54 | 'should return a single root node.',
55 | vm
56 | )
57 | }
58 | vnode = createEmptyVNode()
59 | }
60 | // set parent
61 | vnode.parent = _parentVnode
62 | return vnode
63 | }
64 | ```
65 |
66 | 这段代码最关键的是 `render` 方法的调用，我们在平时的开发工作中手写 `render` 方法的场景比较少，而写的比较多的是 `template` 模板，在之前的 `mounted` 方法的实现中，会把 `template` 编译成 `render` 方法，但这个编译过程是非常复杂的，我们不打算在这里展开讲，之后会专门花一个章节来分析 Vue 的编译过程。
67 |
68 | 在 Vue 的官方文档中介绍了 `render` 函数的第一个参数是 `createElement`，那么结合之前的例子：
69 |
70 | ```html
71 |
72 | {{ message }}
73 |
74 | ```
75 |
76 | 相当于我们编写如下 `render` 函数：
77 |
78 | ```js
79 | render: function (createElement) {
80 | return createElement('div', {
81 | attrs: {
82 | id: 'app'
83 | },
84 | }, this.message)
85 | }
86 | ```
87 |
88 | 再回到 `_render` 函数中的 `render` 方法的调用：
89 |
90 | ```js
91 | vnode = render.call(vm._renderProxy, vm.$createElement)
92 | ```
93 |
94 | 可以看到，`render` 函数中的 `createElement` 方法就是 `vm.$createElement` 方法：
95 |
96 | ```js
97 | export function initRender (vm: Component) {
98 | // ...
99 | // bind the createElement fn to this instance
100 | // so that we get proper render context inside it.
101 | // args order: tag, data, children, normalizationType, alwaysNormalize
102 | // internal version is used by render functions compiled from templates
103 | vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
104 | // normalization is always applied for the public version, used in
105 | // user-written render functions.
106 | vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
107 | }
108 |
109 | ```
110 |
111 | 实际上，`vm.$createElement` 方法定义是在执行 `initRender` 方法的时候，可以看到除了 `vm.$createElement` 方法，还有一个 `vm._c` 方法，它是被模板编译成的 `render` 函数使用，而 `vm.$createElement` 是用户手写 `render` 方法使用的， 这俩个方法支持的参数相同，并且内部都调用了 `createElement` 方法。
112 |
113 |
114 | ## 总结
115 |
116 | `vm._render` 最终是通过执行 `createElement` 方法并返回的是 `vnode`，它是一个虚拟 Node。Vue 2.0 相比 Vue 1.0 最大的升级就是利用了 Virtual DOM。因此在分析 `createElement` 的实现前，我们先了解一下 Virtual DOM 的概念。
--------------------------------------------------------------------------------
/docs/data-driven/virtual-dom.md:
--------------------------------------------------------------------------------
1 | # Virtual DOM
2 |
3 | Virtual DOM 这个概念相信大部分人都不会陌生，它产生的前提是浏览器中的 DOM 是很“昂贵"的，为了更直观的感受，我们可以简单的把一个简单的 div 元素的属性都打印出来，如图所示：
4 |
5 | {{ hi }}
'
179 | })
180 |
181 | // 这种情况不需要
182 | new Vue({
183 | render (h) {
184 | return h('div', this.hi)
185 | }
186 | })
187 | ```
188 |
189 | 因为在 Vue.js 2.0 中，最终渲染都是通过 `render` 函数，如果写 `template` 属性，则需要编译成 `render` 函数，那么这个编译过程会发生运行时，所以需要带有编译器的版本。
190 |
191 | 很显然，这个编译过程对性能会有一定损耗，所以通常我们更推荐使用 Runtime-Only 的 Vue.js。
192 |
193 | ## 总结
194 |
195 | 通过这一节的分析，我们可以了解到 Vue.js 的构建打包过程，也知道了不同作用和功能的 Vue.js 它们对应的入口以及最终编译生成的 JS 文件。尽管在实际开发过程中我们会用 Runtime Only 版本开发比较多，但为了分析 Vue 的编译过程，我们这门课重点分析的源码是 Runtime + Compiler 的 Vue.js。
196 |
197 |
--------------------------------------------------------------------------------
/docs/prepare/directory.md:
--------------------------------------------------------------------------------
1 | # Vue.js 源码目录设计
2 |
3 | Vue.js 的源码都在 src 目录下，其目录结构如下。
4 |
5 | ```
6 | src
7 | ├── compiler # 编译相关
8 | ├── core # 核心代码
9 | ├── platforms # 不同平台的支持
10 | ├── server # 服务端渲染
11 | ├── sfc # .vue 文件解析
12 | ├── shared # 共享代码
13 | ```
14 |
15 | ## compiler
16 |
17 | compiler 目录包含 Vue.js 所有编译相关的代码。它包括把模板解析成 ast 语法树，ast 语法树优化，代码生成等功能。
18 |
19 | 编译的工作可以在构建时做（借助 webpack、vue-loader 等辅助插件）；也可以在运行时做，使用包含构建功能的 Vue.js。显然，编译是一项耗性能的工作，所以更推荐前者——离线编译。
20 |
21 | ## core
22 |
23 | core 目录包含了 Vue.js 的核心代码，包括内置组件、全局 API 封装，Vue 实例化、观察者、虚拟 DOM、工具函数等等。
24 |
25 | 这里的代码可谓是 Vue.js 的灵魂，也是我们之后需要重点分析的地方。
26 |
27 | ## platform
28 |
29 | Vue.js 是一个跨平台的 MVVM 框架，它可以跑在 web 上，也可以配合 weex 跑在 native 客户端上。platform 是 Vue.js 的入口，2 个目录代表 2 个主要入口，分别打包成运行在 web 上和 weex 上的 Vue.js。
30 |
31 | 我们会重点分析 web 入口打包后的 Vue.js，对于 weex 入口打包的 Vue.js，感兴趣的同学可以自行研究。
32 |
33 | ## server
34 |
35 | Vue.js 2.0 支持了服务端渲染，所有服务端渲染相关的逻辑都在这个目录下。注意：这部分代码是跑在服务端的 Node.js，不要和跑在浏览器端的 Vue.js 混为一谈。
36 |
37 | 服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。
38 |
39 | ## sfc
40 |
41 | 通常我们开发 Vue.js 都会借助 webpack 构建， 然后通过 .vue 单文件来编写组件。
42 |
43 | 这个目录下的代码逻辑会把 .vue 文件内容解析成一个 JavaScript 的对象。
44 |
45 | ## shared
46 |
47 | Vue.js 会定义一些工具方法，这里定义的工具方法都是会被浏览器端的 Vue.js 和服务端的 Vue.js 所共享的。
48 |
49 | ## 总结
50 |
51 | 从 Vue.js 的目录设计可以看到，作者把功能模块拆分的非常清楚，相关的逻辑放在一个独立的目录下维护，并且把复用的代码也抽成一个独立目录。
52 |
53 | 这样的目录设计让代码的阅读性和可维护性都变强，是非常值得学习和推敲的。
54 |
55 |
--------------------------------------------------------------------------------
/docs/prepare/entrance.md:
--------------------------------------------------------------------------------
1 | # 从入口开始
2 |
3 | 我们之前提到过 Vue.js 构建过程，在 web 应用下，我们来分析 Runtime + Compiler 构建出来的 Vue.js，它的入口是 `src/platforms/web/entry-runtime-with-compiler.js`：
4 |
5 | ````js
6 | /* @flow */
7 |
8 | import config from 'core/config'
9 | import { warn, cached } from 'core/util/index'
10 | import { mark, measure } from 'core/util/perf'
11 |
12 | import Vue from './runtime/index'
13 | import { query } from './util/index'
14 | import { compileToFunctions } from './compiler/index'
15 | import { shouldDecodeNewlines, shouldDecodeNewlinesForHref } from './util/compat'
16 |
17 | const idToTemplate = cached(id => {
18 | const el = query(id)
19 | return el && el.innerHTML
20 | })
21 |
22 | const mount = Vue.prototype.$mount
23 | Vue.prototype.$mount = function (
24 | el?: string | Element,
25 | hydrating?: boolean
26 | ): Component {
27 | el = el && query(el)
28 |
29 | /* istanbul ignore if */
30 | if (el === document.body || el === document.documentElement) {
31 | process.env.NODE_ENV !== 'production' && warn(
32 | `Do not mount Vue to or - mount to normal elements instead.`
33 | )
34 | return this
35 | }
36 |
37 | const options = this.$options
38 | // resolve template/el and convert to render function
39 | if (!options.render) {
40 | let template = options.template
41 | if (template) {
42 | if (typeof template === 'string') {
43 | if (template.charAt(0) === '#') {
44 | template = idToTemplate(template)
45 | /* istanbul ignore if */
46 | if (process.env.NODE_ENV !== 'production' && !template) {
47 | warn(
48 | `Template element not found or is empty: ${options.template}`,
49 | this
50 | )
51 | }
52 | }
53 | } else if (template.nodeType) {
54 | template = template.innerHTML
55 | } else {
56 | if (process.env.NODE_ENV !== 'production') {
57 | warn('invalid template option:' + template, this)
58 | }
59 | return this
60 | }
61 | } else if (el) {
62 | template = getOuterHTML(el)
63 | }
64 | if (template) {
65 | /* istanbul ignore if */
66 | if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
67 | mark('compile')
68 | }
69 |
70 | const { render, staticRenderFns } = compileToFunctions(template, {
71 | shouldDecodeNewlines,
72 | shouldDecodeNewlinesForHref,
73 | delimiters: options.delimiters,
74 | comments: options.comments
75 | }, this)
76 | options.render = render
77 | options.staticRenderFns = staticRenderFns
78 |
79 | /* istanbul ignore if */
80 | if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
81 | mark('compile end')
82 | measure(`vue ${this._name} compile`, 'compile', 'compile end')
83 | }
84 | }
85 | }
86 | return mount.call(this, el, hydrating)
87 | }
88 |
89 | /**
90 | * Get outerHTML of elements, taking care
91 | * of SVG elements in IE as well.
92 | */
93 | function getOuterHTML (el: Element): string {
94 | if (el.outerHTML) {
95 | return el.outerHTML
96 | } else {
97 | const container = document.createElement('div')
98 | container.appendChild(el.cloneNode(true))
99 | return container.innerHTML
100 | }
101 | }
102 |
103 | Vue.compile = compileToFunctions
104 |
105 | export default Vue
106 |
107 | ````
108 |
109 | 那么，当我们的代码执行 `import Vue from 'vue'` 的时候，就是从这个入口执行代码来初始化 Vue，
110 | 那么 Vue 到底是什么，它是怎么初始化的，我们来一探究竟。
111 |
112 | ## Vue 的入口
113 |
114 | 在这个入口 JS 的上方我们可以找到 `Vue` 的来源：`import Vue from './runtime/index'`，我们先来看一下这块儿的实现，它定义在 `src/platforms/web/runtime/index.js` 中：
115 |
116 | ```js
117 | import Vue from 'core/index'
118 | import config from 'core/config'
119 | import { extend, noop } from 'shared/util'
120 | import { mountComponent } from 'core/instance/lifecycle'
121 | import { devtools, inBrowser, isChrome } from 'core/util/index'
122 |
123 | import {
124 | query,
125 | mustUseProp,
126 | isReservedTag,
127 | isReservedAttr,
128 | getTagNamespace,
129 | isUnknownElement
130 | } from 'web/util/index'
131 |
132 | import { patch } from './patch'
133 | import platformDirectives from './directives/index'
134 | import platformComponents from './components/index'
135 |
136 | // install platform specific utils
137 | Vue.config.mustUseProp = mustUseProp
138 | Vue.config.isReservedTag = isReservedTag
139 | Vue.config.isReservedAttr = isReservedAttr
140 | Vue.config.getTagNamespace = getTagNamespace
141 | Vue.config.isUnknownElement = isUnknownElement
142 |
143 | // install platform runtime directives & components
144 | extend(Vue.options.directives, platformDirectives)
145 | extend(Vue.options.components, platformComponents)
146 |
147 | // install platform patch function
148 | Vue.prototype.__patch__ = inBrowser ? patch : noop
149 |
150 | // public mount method
151 | Vue.prototype.$mount = function (
152 | el?: string | Element,
153 | hydrating?: boolean
154 | ): Component {
155 | el = el && inBrowser ? query(el) : undefined
156 | return mountComponent(this, el, hydrating)
157 | }
158 |
159 | // ...
160 |
161 | export default Vue
162 |
163 | ```
164 | 这里关键的代码是 `import Vue from 'core/index'`，之后的逻辑都是对 Vue 这个对象做一些扩展，可以先不用看，我们来看一下真正初始化 Vue 的地方，在 `src/core/index.js` 中：
165 |
166 | ```js
167 | import Vue from './instance/index'
168 | import { initGlobalAPI } from './global-api/index'
169 | import { isServerRendering } from 'core/util/env'
170 | import { FunctionalRenderContext } from 'core/vdom/create-functional-component'
171 |
172 | initGlobalAPI(Vue)
173 |
174 | Object.defineProperty(Vue.prototype, '$isServer', {
175 | get: isServerRendering
176 | })
177 |
178 | Object.defineProperty(Vue.prototype, '$ssrContext', {
179 | get () {
180 | /* istanbul ignore next */
181 | return this.$vnode && this.$vnode.ssrContext
182 | }
183 | })
184 |
185 | // expose FunctionalRenderContext for ssr runtime helper installation
186 | Object.defineProperty(Vue, 'FunctionalRenderContext', {
187 | value: FunctionalRenderContext
188 | })
189 |
190 | Vue.version = '__VERSION__'
191 |
192 | export default Vue
193 | ```
194 |
195 | 这里有 2 处关键的代码，`import Vue from './instance/index'` 和 `initGlobalAPI(Vue)`，初始化全局 Vue API（我们稍后介绍），我们先来看第一部分，在 `src/core/instance/index.js` 中：
196 |
197 | ### Vue 的定义
198 |
199 | ```js
200 | import { initMixin } from './init'
201 | import { stateMixin } from './state'
202 | import { renderMixin } from './render'
203 | import { eventsMixin } from './events'
204 | import { lifecycleMixin } from './lifecycle'
205 | import { warn } from '../util/index'
206 |
207 | function Vue (options) {
208 | if (process.env.NODE_ENV !== 'production' &&
209 | !(this instanceof Vue)
210 | ) {
211 | warn('Vue is a constructor and should be called with the `new` keyword')
212 | }
213 | this._init(options)
214 | }
215 |
216 | initMixin(Vue)
217 | stateMixin(Vue)
218 | eventsMixin(Vue)
219 | lifecycleMixin(Vue)
220 | renderMixin(Vue)
221 |
222 | export default Vue
223 | ```
224 | 在这里，我们终于看到了 Vue 的庐山真面目，它实际上就是一个用 Function 实现的类，我们只能通过 `new Vue` 去实例化它。
225 |
226 | 有些同学看到这不禁想问，为何 Vue 不用 ES6 的 Class 去实现呢？我们往后看这里有很多 ```xxxMixin``` 的函数调用，并把 `Vue` 当参数传入，它们的功能都是给 Vue 的 prototype 上扩展一些方法（这里具体的细节会在之后的文章介绍，这里不展开），Vue 按功能把这些扩展分散到多个模块中去实现，而不是在一个模块里实现所有，这种方式是用 Class 难以实现的。这么做的好处是非常方便代码的维护和管理，这种编程技巧也非常值得我们去学习。
227 |
228 | ### `initGlobalAPI`
229 |
230 | Vue.js 在整个初始化过程中，除了给它的原型 prototype 上扩展方法，还会给 `Vue` 这个对象本身扩展全局的静态方法，它的定义在 `src/core/global-api/index.js` 中：
231 |
232 | ```js
233 | export function initGlobalAPI (Vue: GlobalAPI) {
234 | // config
235 | const configDef = {}
236 | configDef.get = () => config
237 | if (process.env.NODE_ENV !== 'production') {
238 | configDef.set = () => {
239 | warn(
240 | 'Do not replace the Vue.config object, set individual fields instead.'
241 | )
242 | }
243 | }
244 | Object.defineProperty(Vue, 'config', configDef)
245 |
246 | // exposed util methods.
247 | // NOTE: these are not considered part of the public API - avoid relying on
248 | // them unless you are aware of the risk.
249 | Vue.util = {
250 | warn,
251 | extend,
252 | mergeOptions,
253 | defineReactive
254 | }
255 |
256 | Vue.set = set
257 | Vue.delete = del
258 | Vue.nextTick = nextTick
259 |
260 | Vue.options = Object.create(null)
261 | ASSET_TYPES.forEach(type => {
262 | Vue.options[type + 's'] = Object.create(null)
263 | })
264 |
265 | // this is used to identify the "base" constructor to extend all plain-object
266 | // components with in Weex's multi-instance scenarios.
267 | Vue.options._base = Vue
268 |
269 | extend(Vue.options.components, builtInComponents)
270 |
271 | initUse(Vue)
272 | initMixin(Vue)
273 | initExtend(Vue)
274 | initAssetRegisters(Vue)
275 | }
276 | ```
277 | 这里就是在 Vue 上扩展的一些全局方法的定义，Vue 官网中关于全局 API 都可以在这里找到，这里不会介绍细节，会在之后的章节我们具体介绍到某个 API 的时候会详细介绍。有一点要注意的是，`Vue.util` 暴露的方法最好不要依赖，因为它可能经常会发生变化，是不稳定的。
278 |
279 | ## 总结
280 |
281 | 那么至此，Vue 的初始化过程基本介绍完毕。这一节的目的是让同学们对 Vue 是什么有一个直观的认识，它本质上就是一个用 Function 实现的 Class，然后它的原型 prototype 以及它本身都扩展了一系列的方法和属性，那么 Vue 能做什么，它是怎么做的，我们会在后面的章节一层层帮大家揭开 Vue 的神秘面纱。
282 |
--------------------------------------------------------------------------------
/docs/prepare/flow.md:
--------------------------------------------------------------------------------
1 | # 认识 Flow
2 |
3 | [Flow](https://flow.org/en/docs/getting-started/) 是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查，所以了解 Flow 有助于我们阅读源码。
4 |
5 | ## 为什么用 Flow
6 |
7 | JavaScript 是动态类型语言，它的灵活性有目共睹，但是过于灵活的副作用是很容易就写出非常隐蔽的隐患代码，在编译期甚至看上去都不会报错，但在运行阶段就可能出现各种奇怪的 bug。
8 |
9 | 类型检查是当前动态类型语言的发展趋势，所谓类型检查，就是在编译期尽早发现（由类型错误引起的）bug，又不影响代码运行（不需要运行时动态检查类型），使编写 JavaScript 具有和编写 Java 等强类型语言相近的体验。
10 |
11 | 项目越复杂就越需要通过工具的手段来保证项目的维护性和增强代码的可读性。 Vue.js 在做 2.0 重构的时候，在 ES2015 的基础上，除了 ESLint 保证代码风格之外，也引入了 Flow 做静态类型检查。之所以选择 Flow，主要是因为 Babel 和 ESLint 都有对应的 Flow 插件以支持语法，可以完全沿用现有的构建配置，非常小成本的改动就可以拥有静态类型检查的能力。
12 | ## Flow 的工作方式
13 |
14 | 通常类型检查分成 2 种方式：
15 |
16 | - **类型推断**：通过变量的使用上下文来推断出变量类型，然后根据这些推断来检查类型。
17 |
18 | - **类型注释**：事先注释好我们期待的类型，Flow 会基于这些注释来判断。
19 |
20 | ### 类型推断
21 |
22 | 它不需要任何代码修改即可进行类型检查，最小化开发者的工作量。它不会强制你改变开发习惯，因为它会自动推断出变量的类型。这就是所谓的类型推断，Flow 最重要的特性之一。
23 |
24 | 通过一个简单例子说明一下：
25 |
26 | ```js
27 | /*@flow*/
28 |
29 | function split(str) {
30 | return str.split(' ')
31 | }
32 |
33 | split(11)
34 | ```
35 |
36 | Flow 检查上述代码后会报错，因为函数 `split`
37 | 期待的参数是字符串，而我们输入了数字。
38 |
39 | ### 类型注释
40 |
41 | 如上所述，类型推断是 Flow 最有用的特性之一，不需要编写类型注释就能获取有用的反馈。但在某些特定的场景下，添加类型注释可以提供更好更明确的检查依据。
42 |
43 | 考虑如下代码：
44 |
45 | ```js
46 | /*@flow*/
47 |
48 | function add(x, y){
49 | return x + y
50 | }
51 |
52 | add('Hello', 11)
53 | ```
54 |
55 | Flow 检查上述代码时检查不出任何错误，因为从语法层面考虑， `+` 既可以用在字符串上，也可以用在数字上，我们并没有明确指出 `add()` 的参数必须为数字。
56 |
57 | 在这种情况下，我们可以借助类型注释来指明期望的类型。类型注释是以冒号 `:` 开头，可以在函数参数，返回值，变量声明中使用。
58 |
59 | 如果我们在上段代码中添加类型注释，就会变成如下：
60 |
61 | ```js
62 | /*@flow*/
63 |
64 | function add(x: number, y: number): number {
65 | return x + y
66 | }
67 |
68 | add('Hello', 11)
69 | ```
70 |
71 | 现在 Flow 就能检查出错误，因为函数参数的期待类型为数字，而我们提供了字符串。
72 |
73 | 上面的例子是针对函数的类型注释。接下来我们来看看 Flow 能支持的一些常见的类型注释。
74 |
75 | #### 数组
76 |
77 | ```js
78 | /*@flow*/
79 |
80 | var arr: Array
11 | {{ message }}
12 |
13 | ```
14 |
15 | ```js
16 | var app = new Vue({
17 | el: '#app',
18 | data: {
19 | message: 'Hello Vue!'
20 | },
21 | methods: {
22 | changeMsg() {
23 | this.message = 'Hello World!'
24 | }
25 | }
26 | })
27 | ```
28 | 当我们去修改 `this.message` 的时候，模板对应的插值也会渲染成新的数据，那么这一切是怎么做到的呢？
29 |
30 | 在分析前，我们先直观的想一下，如果不用 Vue 的话，我们会通过最简单的方法实现这个需求：监听点击事件，修改数据，手动操作 DOM 重新渲染。这个过程和使用 Vue 的最大区别就是多了一步“手动操作 DOM 重新渲染”。这一步看上去并不多，但它背后又潜在的几个要处理的问题：
31 |
32 | 1. 我需要修改哪块的 DOM？
33 |
34 | 2. 我的修改效率和性能是不是最优的？
35 |
36 | 3. 我需要对数据每一次的修改都去操作 DOM 吗？
37 |
38 | 4. 我需要 case by case 去写修改 DOM 的逻辑吗？
39 |
40 | 如果我们使用了 Vue，那么上面几个问题 Vue 内部就帮你做了，那么 Vue 是如何在我们对数据修改后自动做这些事情呢，接下来我们将进入一些 Vue 响应式系统的底层的细节。
--------------------------------------------------------------------------------
/docs/reactive/next-tick.md:
--------------------------------------------------------------------------------
1 | # nextTick
2 |
3 | `nextTick` 是 Vue 的一个核心实现，在介绍 Vue 的 nextTick 之前，为了方便大家理解，我先简单介绍一下 JS 的运行机制。
4 |
5 | ## JS 运行机制
6 |
7 | JS 执行是单线程的，它是基于事件循环的。事件循环大致分为以下几个步骤：
8 |
9 | （1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
10 |
11 | （2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
12 |
13 | （3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
14 |
15 | （4）主线程不断重复上面的第三步。
16 |
17 |
11 |
23 | ```
24 |
25 | ```js
26 | import Vue from 'vue'
27 | import VueRouter from 'vue-router'
28 | import App from './App'
29 |
30 | Vue.use(VueRouter)
31 |
32 | // 1. 定义（路由）组件。
33 | // 可以从其他文件 import 进来
34 | const Foo = { template: 'Hello App!
12 |
13 |
14 |
15 |
16 |
foo
' }
35 | const Bar = { template: 'bar
' }
36 |
37 | // 2. 定义路由
38 | // 每个路由应该映射一个组件。 其中"component" 可以是
39 | // 通过 Vue.extend() 创建的组件构造器，
40 | // 或者，只是一个组件配置对象。
41 | // 我们晚点再讨论嵌套路由。
42 | const routes = [
43 | { path: '/foo', component: Foo },
44 | { path: '/bar', component: Bar }
45 | ]
46 |
47 | // 3. 创建 router 实例，然后传 `routes` 配置
48 | // 你还可以传别的配置参数, 不过先这么简单着吧。
49 | const router = new VueRouter({
50 | routes // （缩写）相当于 routes: routes
51 | })
52 |
53 | // 4. 创建和挂载根实例。
54 | // 记得要通过 router 配置参数注入路由，
55 | // 从而让整个应用都有路由功能
56 | const app = new Vue({
57 | el: '#app',
58 | render(h) {
59 | return h(App)
60 | },
61 | router
62 | })
63 | ```
64 |
65 | 这是一个非常简单的例子，接下来我们先从 `Vue.use(VueRouter)` 说起。
--------------------------------------------------------------------------------
/docs/vue-router/install.md:
--------------------------------------------------------------------------------
1 | # 路由注册
2 |
3 | Vue 从它的设计上就是一个渐进式 JavaScript 框架，它本身的核心是解决视图渲染的问题，其它的能力就通过插件的方式来解决。Vue-Router 就是官方维护的路由插件，在介绍它的注册实现之前，我们先来分析一下 Vue 通用的插件注册原理。
4 |
5 | ## `Vue.use`
6 |
7 | Vue 提供了 `Vue.use` 的全局 API 来注册这些插件，所以我们先来分析一下它的实现原理，定义在 `vue/src/core/global-api/use.js` 中：
8 |
9 | ```js
10 | export function initUse (Vue: GlobalAPI) {
11 | Vue.use = function (plugin: Function | Object) {
12 | const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
13 | if (installedPlugins.indexOf(plugin) > -1) {
14 | return this
15 | }
16 |
17 | const args = toArray(arguments, 1)
18 | args.unshift(this)
19 | if (typeof plugin.install === 'function') {
20 | plugin.install.apply(plugin, args)
21 | } else if (typeof plugin === 'function') {
22 | plugin.apply(null, args)
23 | }
24 | installedPlugins.push(plugin)
25 | return this
26 | }
27 | }
28 | ```
29 |
30 | `Vue.use` 接受一个 `plugin` 参数，并且维护了一个 `_installedPlugins` 数组，它存储所有注册过的 `plugin`；接着又会判断 `plugin` 有没有定义 `install` 方法，如果有的话则调用该方法，并且该方法执行的第一个参数是 `Vue`；最后把 `plugin` 存储到 `installedPlugins` 中。
31 |
32 | 可以看到 Vue 提供的插件注册机制很简单，每个插件都需要实现一个静态的 `install` 方法，当我们执行 `Vue.use` 注册插件的时候，就会执行这个 `install` 方法，并且在这个 `install` 方法的第一个参数我们可以拿到 `Vue` 对象，这样的好处就是作为插件的编写方不需要再额外去`import Vue` 了。
33 |
34 | ## 路由安装
35 |
36 | Vue-Router 的入口文件是 `src/index.js`，其中定义了 `VueRouter` 类，也实现了 `install` 的静态方法：`VueRouter.install = install`，它的定义在 `src/install.js` 中。
37 |
38 | ```js
39 | export let _Vue
40 | export function install (Vue) {
41 | if (install.installed && _Vue === Vue) return
42 | install.installed = true
43 |
44 | _Vue = Vue
45 |
46 | const isDef = v => v !== undefined
47 |
48 | const registerInstance = (vm, callVal) => {
49 | let i = vm.$options._parentVnode
50 | if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
51 | i(vm, callVal)
52 | }
53 | }
54 |
55 | Vue.mixin({
56 | beforeCreate () {
57 | if (isDef(this.$options.router)) {
58 | this._routerRoot = this
59 | this._router = this.$options.router
60 | this._router.init(this)
61 | Vue.util.defineReactive(this, '_route', this._router.history.current)
62 | } else {
63 | this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
64 | }
65 | registerInstance(this, this)
66 | },
67 | destroyed () {
68 | registerInstance(this)
69 | }
70 | })
71 |
72 | Object.defineProperty(Vue.prototype, '$router', {
73 | get () { return this._routerRoot._router }
74 | })
75 |
76 | Object.defineProperty(Vue.prototype, '$route', {
77 | get () { return this._routerRoot._route }
78 | })
79 |
80 | Vue.component('RouterView', View)
81 | Vue.component('RouterLink', Link)
82 |
83 | const strats = Vue.config.optionMergeStrategies
84 | strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
85 | }
86 | ```
87 |
88 | 当用户执行 `Vue.use(VueRouter)` 的时候，实际上就是在执行 `install` 函数，为了确保 `install` 逻辑只执行一次，用了 `install.installed` 变量做已安装的标志位。另外用一个全局的 `_Vue` 来接收参数 `Vue`，因为作为 Vue 的插件对 `Vue` 对象是有依赖的，但又不能去单独去 `import Vue`，因为那样会增加包体积，所以就通过这种方式拿到 `Vue` 对象。
89 |
90 | Vue-Router 安装最重要的一步就是利用 `Vue.mixin` 去把 `beforeCreate` 和 `destroyed` 钩子函数注入到每一个组件中。`Vue.mixin` 的定义，在 `vue/src/core/global-api/mixin.js` 中：
91 |
92 | ```js
93 | export function initMixin (Vue: GlobalAPI) {
94 | Vue.mixin = function (mixin: Object) {
95 | this.options = mergeOptions(this.options, mixin)
96 | return this
97 | }
98 | }
99 | ```
100 |
101 | 它的实现实际上非常简单，就是把要混入的对象通过 `mergeOptions` 合并到 `Vue` 的 `options` 中，由于每个组件的构造函数都会在 `extend` 阶段合并 `Vue.options` 到自身的 `options` 中，所以也就相当于每个组件都定义了 `mixin` 定义的选项。
102 |
103 | 回到 `Vue-Router` 的 `install` 方法，先看混入的 `beforeCreate` 钩子函数，对于根 `Vue` 实例而言，执行该钩子函数时定义了 `this._routerRoot` 表示它自身；`this._router` 表示 `VueRouter` 的实例 `router`，它是在 `new Vue` 的时候传入的；另外执行了 `this._router.init()` 方法初始化 `router`，这个逻辑之后介绍，然后用 `defineReactive` 方法把 `this._route` 变成响应式对象，这个作用我们之后会介绍。而对于子组件而言，由于组件是树状结构，在遍历组件树的过程中，它们在执行该钩子函数的时候 `this._routerRoot` 始终指向的离它最近的传入了 `router` 对象作为配置而实例化的父实例。
104 |
105 | 对于 `beforeCreate` 和 `destroyed` 钩子函数，它们都会执行 `registerInstance` 方法，这个方法的作用我们也是之后会介绍。
106 |
107 | 接着给 Vue 原型上定义了 `$router` 和 `$route` 2 个属性的 get 方法，这就是为什么我们可以在组件实例上可以访问 `this.$router` 以及 `this.$route`，它们的作用之后介绍。
108 |
109 | 接着又通过 `Vue.component` 方法定义了全局的 `- ，
- ，