Vue响应式之watch

需要弄清的问题

关于 watch ，一般有两个疑问：

1. 怎么做到监听的属性改变时调用 handler 的
2. deep 是怎么实现的

假设有如下组件：

<template>
  <div id="app">
    {{ foo }}
    {{ testComputed }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      foo: 'bar',
    }
  },
  computed: {
    testComputed () {
      return this.foo
    },
  },
  watch: {
    foo (newVal, oldVal) {
      console.log(newVal)
      console.log(oldVal)
    },
  },
}
</script>

从 initWatch 看起

老样子，还是从 initWatch 看起：

function initWatch (vm: Component, watch: Object) {
  for (const key in watch) {
    const handler = watch[key]
    if (Array.isArray(handler)) {
      for (let i = 0; i < handler.length; i++) {
        createWatcher(vm, key, handler[i])
      }
    } else {
      createWatcher(vm, key, handler)
    }
  }
}

跳转到 createWatcher ：

function createWatcher (
  vm: Component,
  expOrFn: string | Function,
  handler: any,
  options?: Object
) {
  if (isPlainObject(handler)) {
    options = handler
    handler = handler.handler
  }
  if (typeof handler === 'string') {
    handler = vm[handler]
  }
  return vm.$watch(expOrFn, handler, options)
}

可以看到最后调用了 $watch 方法，这个方法在官网有介绍，在 stateMixin 阶段被添加到了 Vue.prototype 上。我们找到这个 $watch 方法：

Vue.prototype.$watch = function (
    expOrFn: string | Function,
    cb: any,
    options?: Object
  ): Function {
  const vm: Component = this
  if (isPlainObject(cb)) {
    return createWatcher(vm, expOrFn, cb, options)
  }
  options = options || {}
  options.user = true
  const watcher = new Watcher(vm, expOrFn, cb, options)
  if (options.immediate) {
    try {
      cb.call(vm, watcher.value)
    } catch (error) {
      handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)
    }
  }
  return function unwatchFn () {
    watcher.teardown()
  }
}

可以看到，在 $watch 里，new 了一个 Watcher ，并返回了一个 unwatchFn ，用来取消订阅所有的依赖。

接下来我们再来看看 Watcher 的构造函数：

class Watcher {
  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    // ...省略部分代码
    // parse expression for getter
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = noop
        process.env.NODE_ENV !== 'production' && warn(
          `Failed watching path: "${expOrFn}" ` +
          'Watcher only accepts simple dot-delimited paths. ' +
          'For full control, use a function instead.',
          vm
        )
      }
    }
    this.value = this.lazy
      ? undefined
      : this.get()
  }
}

可以看到，如果 Watcher 监听的是一个表达式，则在构造函数内会赋值一个解析路径的函数作为 getter 。

然后调用了 get 方法。在 get 中，调用了 getter ，也就是在构造函数中赋值的 parsePath(expOrFn) ：

const bailRE = /[^\w.$]/
export function parsePath (path: string): any {
  if (bailRE.test(path)) {
    return
  }
  const segments = path.split('.')
  return function (obj) {
    for (let i = 0; i < segments.length; i++) {
      if (!obj) return
      obj = obj[segments[i]]
    }
    return obj
  }
}

而 parsePath 返回的函数，只是做了读取相应表达式属性的操作，按上述示例，也就是调用了 foo 的 getter 。

根据之前 initData 时执行的 defineReactive ，会将 foo 对应的 dep 依赖添加到当前的 watcher 中，这样，在 foo 改变时，就会调用 dep.notify ，既而调用当前 watcher 的 watcher.update 方法，而在 update 中，最终调用了 run ：

/**
  * Subscriber interface.
  * Will be called when a dependency changes.
  */
update () {
  /* istanbul ignore else */
  if (this.lazy) {
    this.dirty = true
  } else if (this.sync) {
    this.run()
  } else {
    queueWatcher(this)
  }
}

/**
  * Scheduler job interface.
  * Will be called by the scheduler.
  */
run () {
  if (this.active) {
    const value = this.get()
    if (
      value !== this.value ||
      // Deep watchers and watchers on Object/Arrays should fire even
      // when the value is the same, because the value may
      // have mutated.
      isObject(value) ||
      this.deep
    ) {
      // set new value
      const oldValue = this.value
      this.value = value
      if (this.user) {
        try {
          this.cb.call(this.vm, value, oldValue)
        } catch (e) {
          handleError(e, this.vm, `callback for watcher "${this.expression}"`)
        }
      } else {
        this.cb.call(this.vm, value, oldValue)
      }
    }
  }
}

可以看到，在 run 方法中，调用了 cb ，也就是用户定义的 handler 。

至此，就解决了第一个疑问。

deep 是如何实现的

有关于 deep 选项，我们在 Watcher 中搜索，可以在 get 方法中找到：

get () {
  pushTarget(this)
  let value
  const vm = this.vm
  try {
    value = this.getter.call(vm, vm)
  } catch (e) {
    if (this.user) {
      handleError(e, vm, `getter for watcher "${this.expression}"`)
    } else {
      throw e
    }
  } finally {
    // "touch" every property so they are all tracked as
    // dependencies for deep watching
    if (this.deep) {
      traverse(value)
    }
    popTarget()
    this.cleanupDeps()
  }
  return value
}

其中：

if (this.deep) {
  traverse(value)
}

关于 traverse 就不具体去看了，大致就是把 value 都过一遍，把深层的 dep 都添加到当前 watcher 中去。