[update] 更新代码注释

Author: Jouryjc

vue/src/core/global-api/extend.js

@@ -19,19 +19,26 @@ export function initExtend (Vue: GlobalAPI) {
   // 构造一个 Vue 的子类
   Vue.extend = function (extendOptions: Object): Function {
     extendOptions = extendOptions || {}
+
+    // this 指向 Vue
     const Super = this
     const SuperId = Super.cid
+
+    // 优化点：将构造器缓存起来，下次再实例直接返回
     const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
     if (cachedCtors[SuperId]) {
       return cachedCtors[SuperId]
     }
 
     const name = extendOptions.name || Super.options.name
     if (process.env.NODE_ENV !== 'production' && name) {
+
+      // 校验组件名称：1.不允许是内置标签；2.只能英文开头
       validateComponentName(name)
     }
 
     // 原型继承
+    // 声明子类构造器
     const Sub = function VueComponent (options) {
       this._init(options)
     }

vue/src/core/instance/lifecycle.js

@@ -58,9 +58,12 @@ export function lifecycleMixin (Vue: Class<Component>) {
     const prevVnode = vm._vnode
     const prevActiveInstance = activeInstance
     activeInstance = vm
+
+    // 将虚拟node缓存在_vnode
     vm._vnode = vnode
     // Vue.prototype.__patch__ is injected in entry points
     // based on the rendering backend used.
+    // 首次渲染没有对比VNode，这里为null
     if (!prevVnode) {
       // initial render
       vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)

vue/src/core/instance/state.js

@@ -135,6 +135,7 @@ function initData (vm: Component) {
     )
   }
   // proxy data on instance
+  // 判断data的key值有没跟props和methods一样的，有的话发出警告
   const keys = Object.keys(data)
   const props = vm.$options.props
   const methods = vm.$options.methods
@@ -155,6 +156,9 @@ function initData (vm: Component) {
         `Use prop default value instead.`,
         vm
       )
+
+    // 判断key的首字符是不是 $ 或 _
+    // 不是将属性代理到 vue 实例中
     } else if (!isReserved(key)) {
 
       // 代理到实例下面
@@ -184,10 +188,12 @@ const computedWatcherOptions = { computed: true }
 // 定义computed属性
 function initComputed (vm: Component, computed: Object) {
   // $flow-disable-line
+  // 创建一个空对象
   const watchers = vm._computedWatchers = Object.create(null)
   // computed properties are just getters during SSR
   const isSSR = isServerRendering()
 
+  // 遍历拿到每个用户定义的computed getter
   for (const key in computed) {
     const userDef = computed[key]
     const getter = typeof userDef === 'function' ? userDef : userDef.get
@@ -200,23 +206,7 @@ function initComputed (vm: Component, computed: Object) {
 
     if (!isSSR) {
       // create internal watcher for the computed property.
-      /**
-      * 熟悉的new Watcher，创建一个订阅者，为了之后收集依赖
-      * 将例子中的num、lastNum和计算属性comNum进行绑定
-      * 也就是说在一个deps中有两个dep，其中的subs分别是
-      * dep1.subs:[watcher(num),watcher(comNum)]
-      * dep2.subs:[watcher(lastNum),watcher(comNum)]
-      * dep3........
-      * 请看前面的例子，页面html中并没有渲染{{lastNum}}；按理说就不会执行lastNum的getter
-      * 从而就不会和计算属性进行关联绑定，如果更改lastNum就不会触发dep2的notify()发布
-      * 自然也就不会在页面看到comNum有所变化，但是运行后却不是这样，为什么呢
-      * 这就引出这个initComputed的下面方法了---依赖收集(watcher.prototype.depend)！
-      * 当时也是看了好久才知道这个depend方法的作用，后面再说
-      * 首先先来提个头，就是下面代码中watcher中这个getter
-      * 其实就是function comNum() {return this.num+"-computed-"+this.lastNum;}}
-      * 而这个getter什么时候执行呢，会在Watcher.prototype.evaluate()方法中执行
-      * 所以watcher中的evaluate()与depend()两个方法都与initComputed相关
-      */
+      // 为每一个 getter 创建一个 computed watcher
       watchers[key] = new Watcher(
         vm,
         getter || noop,

vue/src/core/observer/dep.js

@@ -11,12 +11,14 @@ let uid = 0
  */
 // 收集依赖对象
 export default class Dep {
-  static target: ?Watcher;
+  static target: ?Watcher;  // 静态属性 target，这是一个全局唯一 Watcher
   id: number;
   subs: Array<Watcher>;
 
   constructor () {
     this.id = uid++
+
+    // 用于收集订阅对象
     this.subs = []
   }
 
@@ -50,6 +52,8 @@ Dep.target = null
 const targetStack = []
 
 export function pushTarget (_target: ?Watcher) {
+
+  // Dep.target 赋值为当前的渲染 watcher 并压栈（为了恢复用）
   if (Dep.target) targetStack.push(Dep.target)
   Dep.target = _target
 }

vue/src/core/observer/index.js

@@ -41,8 +41,13 @@ export class Observer {
 
   constructor (value: any) {
     this.value = value
+
+    // 实例化一个 Dep 对象
     this.dep = new Dep()
     this.vmCount = 0
+
+    // 把自身实例添加到数据对象 value 的 __ob__ 属性上
+    // 定义在 src/core/util/lang.js
     def(value, '__ob__', this)
     if (Array.isArray(value)) {
       const augment = hasProto
@@ -60,6 +65,7 @@ export class Observer {
    * getter/setters. This method should only be called when
    * value type is Object.
    */
+  // 将每个属性转换成 getter/setter，注意函数参数是对象
   walk (obj: Object) {
     const keys = Object.keys(obj)
     for (let i = 0; i < keys.length; i++) {
@@ -71,6 +77,8 @@ export class Observer {
    * Observe a list of Array items.
    */
   observeArray (items: Array<any>) {
+
+    // 遍历数组再次调用 observe
     for (let i = 0, l = items.length; i < l; i++) {
       observe(items[i])
     }
@@ -114,17 +122,17 @@ export function observe (value: any, asRootData: ?boolean): Observer | void {
   }
   let ob: Observer | void
 
-  // 如果有ob，就直接返回
+  // 如果有ob，说明已经是个响应式对象，就直接返回
   if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
     ob = value.__ob__
 
   // 没有的话实例一个ob对象
   } else if (
-    shouldObserve &&
-    !isServerRendering() &&
-    (Array.isArray(value) || isPlainObject(value)) &&
-    Object.isExtensible(value) &&
-    !value._isVue
+    shouldObserve &&  // 定义的变量，true，在initProps会改变该值
+    !isServerRendering() && // 服务端渲染
+    (Array.isArray(value) || isPlainObject(value)) && // 数组或纯对象
+    Object.isExtensible(value) && // 可扩展
+    !value._isVue // 不是 vue 实例
   ) {
     ob = new Observer(value)
   }
@@ -148,7 +156,10 @@ export function defineReactive (
   /*在闭包内存储一个Dep对象*/
   const dep = new Dep()
 
+  // 拿到 obj 的属性描述符
   const property = Object.getOwnPropertyDescriptor(obj, key)
+
+  // 判断，如果是不能配置的属性，直接终止程序
   if (property && property.configurable === false) {
     return
   }
@@ -160,14 +171,16 @@ export function defineReactive (
     val = obj[key]
   }
 
+  // 对子对象递归调用 observe 方法，这样就保证了无论 obj 的结构多复杂，它的所有子属性也能变成响应式的对象
   let childOb = !shallow && observe(val)
   Object.defineProperty(obj, key, {
     enumerable: true,
     configurable: true,
     get: function reactiveGetter () {
-      // 依赖收集
       const value = getter ? getter.call(obj) : val
       if (Dep.target) {
+
+        // 依赖收集
         dep.depend()
         if (childOb) {
           childOb.dep.depend()
@@ -193,6 +206,8 @@ export function defineReactive (
       } else {
         val = newVal
       }
+
+      // shallow 为 false 的情况，会对新设置的值变成一个响应式对象
       childOb = !shallow && observe(newVal)
       // 通知订阅者
       dep.notify()
@@ -205,6 +220,7 @@ export function defineReactive (
  * triggers change notification if the property doesn't
  * already exist.
  */
+// 当需要给对象添加新属性并触发页面改变时，可以调用set函数
 export function set (target: Array<any> | Object, key: any, val: any): any {
   if (process.env.NODE_ENV !== 'production' &&
     (isUndef(target) || isPrimitive(target))

vue/src/core/observer/scheduler.js

@@ -47,10 +47,17 @@ function flushSchedulerQueue () {
   //    user watchers are created before the render watcher)
   // 3. If a component is destroyed during a parent component's watcher run,
   //    its watchers can be skipped.
+
+  /**
+   * 1.组件的更新由父到子；因为父组件的创建过程是先于子的，所以 watcher 的创建也是先父后子，执行顺序也应该保持先父后子。
+   * 2.用户的自定义 watcher 要优先于渲染 watcher 执行；因为用户自定义 watcher 是在渲染 watcher 之前创建的。
+   * 3.如果一个组件在父组件的 watcher 执行期间被销毁，那么它对应的 watcher 执行都可以被跳过，所以父组件的 watcher 应该先执行。
+   */
   queue.sort((a, b) => a.id - b.id)
 
   // do not cache length because more watchers might be pushed
   // as we run existing watchers
+  // 这里不缓存队列长度的原因是在 watcher.run() 的时候，很可能用户会再次添加新的 watcher
   for (index = 0; index < queue.length; index++) {
     watcher = queue[index]
     if (watcher.before) {
@@ -129,6 +136,8 @@ function callActivatedHooks (queue) {
  */
 export function queueWatcher (watcher: Watcher) {
   const id = watcher.id
+
+  // 确保只会push一次
   if (has[id] == null) {
     has[id] = true
     if (!flushing) {
@@ -143,6 +152,8 @@ export function queueWatcher (watcher: Watcher) {
       queue.splice(i + 1, 0, watcher)
     }
     // queue the flush
+
+    // 保证只执行一次nextTick
     if (!waiting) {
       waiting = true
       nextTick(flushSchedulerQueue)

vue/src/core/observer/watcher.js

@@ -22,6 +22,14 @@ let uid = 0
  * and fires callback when the expression value changes.
  * This is used for both the $watch() api and directives.
  */
+
+/* new Watcher(vm, updateComponent, noop, {
+    before () {
+      if (vm._isMounted) {
+        callHook(vm, 'beforeUpdate')
+      }
+    }
+  }, true) */
 export default class Watcher {
   vm: Component;
   expression: string;
@@ -68,15 +76,23 @@ export default class Watcher {
     this.id = ++uid // uid for batching
     this.active = true
     this.dirty = this.computed // for computed watchers
+
+    // 跟dep相关的一些属性
+    // 表示 Watcher 实例持有的 Dep 实例的数组
     this.deps = []
     this.newDeps = []
+
+    // 代表 this.deps 和 this.newDeps 的 id Set
     this.depIds = new Set()
     this.newDepIds = new Set()
+
     this.expression = process.env.NODE_ENV !== 'production'
       ? expOrFn.toString()
       : ''
     // parse expression for getter
     if (typeof expOrFn === 'function') {
+
+      // 这里的getter是updateComponent函数
       this.getter = expOrFn
     } else {
       this.getter = parsePath(expOrFn)
@@ -90,10 +106,14 @@ export default class Watcher {
         )
       }
     }
+
+    // computed watcher并不会立刻求值
     if (this.computed) {
       this.value = undefined
       this.dep = new Dep()
     } else {
+
+      // 执行watch的get函数
       this.value = this.get()
     }
   }
@@ -106,6 +126,8 @@ export default class Watcher {
     let value
     const vm = this.vm
     try {
+
+      // this.getter 对应就是 updateComponent 函数
       value = this.getter.call(vm, vm)
     } catch (e) {
       if (this.user) {
@@ -131,6 +153,9 @@ export default class Watcher {
   addDep (dep: Dep) {
     const id = dep.id
     if (!this.newDepIds.has(id)) {
+
+      // 把当前的 watcher 订阅到这个数据持有的 dep 的 subs 中
+      // 这个目的是为后续数据变化时候能通知到哪些 subs 做准备
       this.newDepIds.add(id)
       this.newDeps.push(dep)
       if (!this.depIds.has(id)) {
@@ -217,6 +242,8 @@ export default class Watcher {
       this.dirty = false
       if (this.user) {
         try {
+
+          // 这就是为什么我们写watch时能拿到新值和旧值
           cb.call(this.vm, value, oldValue)
         } catch (e) {
           handleError(e, this.vm, `callback for watcher "${this.expression}"`)

vue/src/core/util/next-tick.js

@@ -25,6 +25,8 @@ function flushCallbacks () {
 // when state is changed right before repaint (e.g. #6813, out-in transitions).
 // Here we use microtask by default, but expose a way to force (macro) task when
 // needed (e.g. in event handlers attached by v-on).
+
+// 定义宏任务和微任务
 let microTimerFunc
 let macroTimerFunc
 let useMacroTask = false
@@ -34,6 +36,8 @@ let useMacroTask = false
 // in IE. The only polyfill that consistently queues the callback after all DOM
 // events triggered in the same loop is by using MessageChannel.
 /* istanbul ignore if */
+
+// 宏任务和微任务函数的实现
 if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
   macroTimerFunc = () => {
     setImmediate(flushCallbacks)
@@ -78,6 +82,7 @@ if (typeof Promise !== 'undefined' && isNative(Promise)) {
  * Wrap a function so that if any code inside triggers state change,
  * the changes are queued using a (macro) task instead of a microtask.
  */
+// 确保函数执行过程中对数据任意的修改，触发变化执行 nextTick 的时候强制走 macroTimerFunc
 export function withMacroTask (fn: Function): Function {
   return fn._withTask || (fn._withTask = function () {
     useMacroTask = true
@@ -109,6 +114,8 @@ export function nextTick (cb?: Function, ctx?: Object) {
     }
   }
   // $flow-disable-line
+
+  // 不传cb直接返回一个promise的调用
   if (!cb && typeof Promise !== 'undefined') {
     return new Promise(resolve => {
       _resolve = resolve