[update]watch原理分析

Author: Jouryjc

vue/src/core/instance/state.js

@@ -64,8 +64,11 @@ export function initState (vm: Component) {
     observe(vm._data = {}, true /* asRootData */)
   }
   if (opts.computed) initComputed(vm, opts.computed)  // 初始化computed
+
+  // 这个 nativeWatch 定义在 src/core/util/env.js 中
+  // Firefox 在对象原型上有一个 watch 方法，感兴趣的可以去 MDN 了解下
   if (opts.watch && opts.watch !== nativeWatch) {
-    initWatch(vm, opts.watch)
+    initWatch(vm, opts.watch) // 初始化watch
   }
 }
 
@@ -313,7 +316,11 @@ function initMethods (vm: Component, methods: Object) {
 
 function initWatch (vm: Component, watch: Object) {
   for (const key in watch) {
+
+    // 获取属性的处理函数
     const handler = watch[key]
+
+    // 处理函数如果是数组，遍历每个项调用 createWatcher
     if (Array.isArray(handler)) {
       for (let i = 0; i < handler.length; i++) {
         createWatcher(vm, key, handler[i])
@@ -330,10 +337,13 @@ function createWatcher (
   handler: any,
   options?: Object
 ) {
+
+  // handler 是个对象，把对象复制给 options，然后再获取 handler 处理函数
   if (isPlainObject(handler)) {
     options = handler
     handler = handler.handler
   }
+
   if (typeof handler === 'string') {
     handler = vm[handler]
   }
@@ -372,12 +382,20 @@ export function stateMixin (Vue: Class<Component>) {
     options?: Object
   ): Function {
     const vm: Component = this
+
+    // 判断值是对象，接着调用 createWatcher
     if (isPlainObject(cb)) {
       return createWatcher(vm, expOrFn, cb, options)
     }
     options = options || {}
+
+    // 标志是 user watcher
     options.user = true
+
+    // 实例化user watcher
     const watcher = new Watcher(vm, expOrFn, cb, options)
+
+    // 如果 immediate 值为true，立即执行处理函数
     if (options.immediate) {
       cb.call(vm, watcher.value)
     }

vue/src/core/observer/index.js

@@ -177,6 +177,8 @@ export function defineReactive (
     enumerable: true,
     configurable: true,
     get: function reactiveGetter () {
+
+      // 获取 getter 函数，这里就是 src/core/instance/lifecycle.js 的 updateComponent
       const value = getter ? getter.call(obj) : val
       if (Dep.target) {
 
@@ -192,6 +194,8 @@ export function defineReactive (
       return value
     },
     set: function reactiveSetter (newVal) {
+
+      // 获取 getter 函数，这里就是 src/core/instance/lifecycle.js 的 updateComponent
       const value = getter ? getter.call(obj) : val
       /* eslint-disable no-self-compare */
       if (newVal === value || (newVal !== newVal && value !== value)) {
@@ -202,6 +206,8 @@ export function defineReactive (
         customSetter()
       }
       if (setter) {
+
+        // 这就是为什么改响应式数据，能够修改视图
         setter.call(obj, newVal)
       } else {
         val = newVal

vue/src/core/observer/traverse.js

@@ -24,6 +24,8 @@ function _traverse (val: any, seen: SimpleSet) {
   }
   if (val.__ob__) {
     const depId = val.__ob__.dep.id
+
+    // 遍历过程中会把子响应式对象通过它们的 dep id 记录到 seenObjects，避免以后重复访问
     if (seen.has(depId)) {
       return
     }

vue/src/core/observer/watcher.js

@@ -138,6 +138,7 @@ export default class Watcher {
     } finally {
       // "touch" every property so they are all tracked as
       // dependencies for deep watching
+      // deep watcher
       if (this.deep) {
         traverse(value)
       }