docs(src): 更新文档

zhangxixi · zhangxixi · commit c15b8ca6ab73 · 2019-06-23T14:56:56.000+08:00
diff --git a/src/core/instance/init.js b/src/core/instance/init.js
@@ -66,6 +66,18 @@ export function initMixin (Vue: Class<Component>) {
       measure(`vue ${vm._name} init`, startTag, endTag)
     }
 
+    /*
+      我们在main.js里实例化Vue时，可能会在options里传入el，也可能是写$mount方法
+      new Vue({
+        el: '#app'
+      })
+      或者
+      new Vue({
+
+      }).$mount('#app')
+
+      所以如果有el，说明没有$mount，则这里需要执行$mount。如果没有el，说明是我们自己手动执行的$mount。
+    */
     if (vm.$options.el) {
       vm.$mount(vm.$options.el)
     }
diff --git a/src/core/instance/state.js b/src/core/instance/state.js
@@ -70,6 +70,7 @@ function initProps (vm: Component, propsOptions: Object) {
   const isRoot = !vm.$parent
   // root instance props should be converted
   if (!isRoot) {
+    // 把shouldObserve设为false
     toggleObserving(false)
   }
   for (const key in propsOptions) {
@@ -85,6 +86,7 @@ function initProps (vm: Component, propsOptions: Object) {
           vm
         )
       }
+      // 不允许为props设置值，保证单向数据流
       defineReactive(props, key, value, () => {
         if (!isRoot && !isUpdatingChildComponent) {
           warn(
@@ -102,10 +104,13 @@ function initProps (vm: Component, propsOptions: Object) {
     // static props are already proxied on the component's prototype
     // during Vue.extend(). We only need to proxy props defined at
     // instantiation here.
+    // 代理props到vm上，允许我们通过this[key]访问到props里的属性。
+    // 假设我们的props里定义了name，当我们通过this.name访问时，其实访问的就是this._props[key]
     if (!(key in vm)) {
       proxy(vm, `_props`, key)
     }
   }
+  // 把shouldObserve设为true
   toggleObserving(true)
 }
 
@@ -123,12 +128,14 @@ function initData (vm: Component) {
     )
   }
   // proxy data on instance
+  // 代理data到vue实例上，这样通过this.[key]就能访问到this._data[key]
   const keys = Object.keys(data)
   const props = vm.$options.props
   const methods = vm.$options.methods
   let i = keys.length
   while (i--) {
     const key = keys[i]
+    // 检查methods和props中是否已经定义过了，会先检查methods，再检查props
     if (process.env.NODE_ENV !== 'production') {
       if (methods && hasOwn(methods, key)) {
         warn(
@@ -336,6 +343,7 @@ export function stateMixin (Vue: Class<Component>) {
       warn(`$props is readonly.`, this)
     }
   }
+  // TODO: 为什么这里用Object.defineProperty，下面的$set，$delete不需要
   Object.defineProperty(Vue.prototype, '$data', dataDef)
   Object.defineProperty(Vue.prototype, '$props', propsDef)
 
diff --git a/src/core/observer/index.js b/src/core/observer/index.js
@@ -41,8 +41,10 @@ export class Observer {
 
   constructor (value: any) {
     this.value = value
+    // 实例化被观察者
     this.dep = new Dep()
     this.vmCount = 0
+    // 根据__ob__属性判断是否已经被观察了
     def(value, '__ob__', this)
     if (Array.isArray(value)) {
       if (hasProto) {
@@ -107,6 +109,7 @@ function copyAugment (target: Object, src: Object, keys: Array<string>) {
  * returns the new observer if successfully observed,
  * or the existing observer if the value already has one.
  */
+// 创建一个观察者对象
 export function observe (value: any, asRootData: ?boolean): Observer | void {
   if (!isObject(value) || value instanceof VNode) {
     return
@@ -139,6 +142,7 @@ export function defineReactive (
   customSetter?: ?Function,
   shallow?: boolean
 ) {
+  // 这里再实例一次被观察者对象
   const dep = new Dep()
 
   // 获取属性描述对象，如: {value: "test", writable: true, enumerable: true, configurable: true}
@@ -161,6 +165,7 @@ export function defineReactive (
     get: function reactiveGetter () {
       const value = getter ? getter.call(obj) : val
       if (Dep.target) {
+        // 把this添加到给观察者的依赖中
         dep.depend()
         if (childOb) {
           childOb.dep.depend()
@@ -189,6 +194,7 @@ export function defineReactive (
         val = newVal
       }
       childOb = !shallow && observe(newVal)
+      // 通知它的订阅者（即观察者）更新
       dep.notify()
     }
   })
diff --git a/vue源码解析.md b/vue源码解析.md
@@ -3,7 +3,7 @@ title: vue源码解析
 date: 2019-06-22 16:56:20
 tags:
 ---
-## 首先是入口文件: `src/platforms/web/entry-runtime-with-compiler.js`
+## <span id="entry">首先是入口文件: `src/platforms/web/entry-runtime-with-compiler.js`</span>
 
 做了哪些事情呢？
 
@@ -31,7 +31,7 @@ new Vue({
 这里的`$mount`就是上面重写后的`Vue.prototype.$mount`，所以执行`$mount`时实际执行的是`mount.call(this, el, hydrating)`，也就是重写前的`Vue.prototype.$mount`。重写前的`Vue.prototype.$mount`来自`src/platforms/web/runtime/index.js`。我们去看一下这个文件里做了哪些事情。
 
 
-## `src/platforms/web/runtime/index.js`
+## <span id="web-runtime-index">`src/platforms/web/runtime/index.js`</span>
 做了哪些事情呢？
 
 1. 从`src/core/index`里导入`Vue`
@@ -70,3 +70,176 @@ new Vue({
 可以看到这个文件里定义了我们执行的`$mount`，而返回的是`mountComponent(this, el, hydrating)`，这个`mountComponent`方法来自`src/core/instance/lifecycle`。
 
 ## `src/core/instance/lifecycle`
+`mountComponent`函数做了哪些事情呢？
+
+1. 设置`vm.$el`: `vm.$el = el`
+2. 执行`beforeMount`钩子: `callHook(vm, 'beforeMount')`
+3. 实例化一个`watcher`
+   ```javascript
+    new Watcher(vm, updateComponent, noop, {
+      before () {
+        if (vm._isMounted && !vm._isDestroyed) {
+          callHook(vm, 'beforeUpdate')
+        }
+      }
+    }, true
+   ```
+4. 执行`mounted`钩子
+   ```javascript
+    if (vm.$vnode == null) {
+      vm._isMounted = true
+      callHook(vm, 'mounted')
+    }
+   ```
+5. 返回`return vm`
+
+可以看到这里就完成了整个组件的挂载，并且在这里调用了`new Watcher`，如果有更新，就执行`beforeUpdate`钩子。
+
+这个`new Watcher`我们稍后再说。
+
+总结：上面这些是顺着`.$mount('#app')`讲的，说明了执行`.$mount('#app')`过程中做了什么事情。那么`new Vue({// 这里是我们写的配置，对应的是this.$options})`这个实例化Vue的过程做了什么呢？请接着阅读下文
+
+
+# Vue的实例化过程
+从[第一部分入口文件](#entry)和[第二部分](#web-runtime-index)分析可知，最终我们在`main.js`里使用的`Vue`来自`src/core/index.js`，继续追踪`src/core/index.js`，发现`Vue`来自`src/core/instance/index.js`。
+
+## `src/core/instance/index.js`
+这个文件，定义了`Vue`函数，然后下面执行的一系列函数，就是在Vue的原型上添加属性。
+
+```javascript
+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
+
+```
+
+这一系列函数就是关键了。
+
+## `initMixin`
+来自`src/core/instance/init.js`，它在`Vue`原型上设置了`_init`方法（只是定义，没有执行），来看一下这个`_init`方法：
+
+1. 设置`vm`等于`this`
+2. 设置`vm.$options`
+3. 设置`vm._renderProxy`
+4. 设置`vm._self = vm`
+5. 初始化生命周期之类的：
+   ```javascript
+    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')
+  ```
+6. 如果有el，则执行$mount。
+
+### `initLifecycle`
+```javascript
+  vm.$parent = parent
+  vm.$root = parent ? parent.$root : vm
+
+  vm.$children = []
+  vm.$refs = {}
+
+  vm._watcher = null
+  vm._inactive = null
+  vm._directInactive = false
+  vm._isMounted = false
+  vm._isDestroyed = false
+  vm._isBeingDestroyed = false
+```
+
+### `initEvents`
+```javascript
+  vm._events = Object.create(null)
+  vm._hasHookEvent = false
+  // init parent attached events
+  const listeners = vm.$options._parentListeners
+  if (listeners) {
+    updateComponentListeners(vm, listeners)
+  }
+```
+
+### `initRender`
+```javascript
+  vm._vnode = null // the root of the child tree
+  vm._staticTrees = null
+  vm.$slots
+  vm.$scopedSlots
+  vm._c
+  vm.$createElement
+  defineReactive(vm, '$attrs',...
+  defineReactive(vm, '$listeners',...
+```
+
+### `initInjections`
+解析inject，关闭响应式
+
+### `initState`
+设置`vm._watchers = []`
+1. `initProps`
+   定义`vm._props`
+   校验`props`
+   关闭响应式，然后`defineReactive(props, key, value,...`
+   proxy(vm, `_props`, key)
+2. `initMethods`: `vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm)`
+3. `initData`
+   定义`vm._data`
+   `proxy(vm, '_data', key)`
+   `observe(data, true)`
+4. `initComputed`
+   定义`vm._computedWatchers`
+   对每个key new一个watcher
+5. `initWatch`
+   `createWatcher`
+
+### `initProvide`
+设置`vm._provided`为vm.$options.provide
+
+
+## `stateMixin`
+来自`src/core/instance/state.js`：
+
+1. 定义`Vue.prototype.$data`，其get方法是返回`this._data`
+2. 定义`Vue.prototype.$props`，其get方法是返回`this._props`
+3. 定义`Vue.prototype.$set = set`, 这个`set`来自`src/core/observer/index`
+4. 定义`Vue.prototype.$delete = del`, 这个`del`来自`src/core/observer/index`
+5. 定义`Vue.prototype.$watch`
+
+## `eventsMixin`
+来自`src/core/instance/event.js`：
+
+1. 定义`Vue.prototype.$on`、`Vue.prototype.$once`、`Vue.prototype.$off`、`Vue.prototype.$emit`
+
+## `lifecycleMixin`
+来自`src/core/instance/lifecycle.js`：
+
+1. 定义`Vue.prototype._update`、`Vue.prototype.$forceUpdate`、`Vue.prototype.$destroy`
+
+## `renderMixin`
+来自`src/core/instance/render.js`：
+
+1. 执行`installRenderHelpers`，略
+2. 定义`Vue.prototype.$nextTick`
+3. 定义`Vue.prototype._render`
+
+
+# `new Watcher`
+还记得我们上面分析`.$mount`执行过程时，留着一个`new Watcher`没说呢。`Watcher`是在`src/core/observer/watcher.js`里定义的。下面就开始分析：
+
+

Original file line number	Diff line number	Diff line change
`@@ -70,6 +70,7 @@ function initProps (vm: Component, propsOptions: Object) {`
`70`	`70`	`const isRoot = !vm.$parent`
`71`	`71`	`// root instance props should be converted`
`72`	`72`	`if (!isRoot) {`
	`73`	`+ // 把shouldObserve设为false`
`73`	`74`	`toggleObserving(false)`
`74`	`75`	`}`
`75`	`76`	`for (const key in propsOptions) {`
`@@ -85,6 +86,7 @@ function initProps (vm: Component, propsOptions: Object) {`
`85`	`86`	`vm`
`86`	`87`	`)`
`87`	`88`	`}`
	`89`	`+ // 不允许为props设置值，保证单向数据流`
`88`	`90`	`defineReactive(props, key, value, () => {`
`89`	`91`	`if (!isRoot && !isUpdatingChildComponent) {`
`90`	`92`	`warn(`
`@@ -102,10 +104,13 @@ function initProps (vm: Component, propsOptions: Object) {`
`102`	`104`	`// static props are already proxied on the component's prototype`
`103`	`105`	`// during Vue.extend(). We only need to proxy props defined at`
`104`	`106`	`// instantiation here.`
	`107`	`+ // 代理props到vm上，允许我们通过this[key]访问到props里的属性。`
	`108`	`+ // 假设我们的props里定义了name，当我们通过this.name访问时，其实访问的就是this._props[key]`
`105`	`109`	`if (!(key in vm)) {`
`106`	`110`	proxy(vm, `_props`, key)
`107`	`111`	`}`
`108`	`112`	`}`
	`113`	`+ // 把shouldObserve设为true`
`109`	`114`	`toggleObserving(true)`
`110`	`115`	`}`
`111`	`116`
`@@ -123,12 +128,14 @@ function initData (vm: Component) {`
`123`	`128`	`)`
`124`	`129`	`}`
`125`	`130`	`// proxy data on instance`
	`131`	`+ // 代理data到vue实例上，这样通过this.[key]就能访问到this._data[key]`
`126`	`132`	`const keys = Object.keys(data)`
`127`	`133`	`const props = vm.$options.props`
`128`	`134`	`const methods = vm.$options.methods`
`129`	`135`	`let i = keys.length`
`130`	`136`	`while (i--) {`
`131`	`137`	`const key = keys[i]`
	`138`	`+ // 检查methods和props中是否已经定义过了，会先检查methods，再检查props`
`132`	`139`	`if (process.env.NODE_ENV !== 'production') {`
`133`	`140`	`if (methods && hasOwn(methods, key)) {`
`134`	`141`	`warn(`
`@@ -336,6 +343,7 @@ export function stateMixin (Vue: Class<Component>) {`
`336`	`343`	warn(`$props is readonly.`, this)
`337`	`344`	`}`
`338`	`345`	`}`
	`346`	`+ // TODO: 为什么这里用Object.defineProperty，下面的$set，$delete不需要`
`339`	`347`	`Object.defineProperty(Vue.prototype, '$data', dataDef)`
`340`	`348`	`Object.defineProperty(Vue.prototype, '$props', propsDef)`
`341`	`349`