Vue的data、computed、watch源码浅谈

的途中遇到data.number的读取，这时又会触发’number’这个key的劫持get函数，这时全局的Dep.target是computedWatcher，data.number的dep依赖筐子里丢进去了computedWatcher。
此时的依赖关系是 data.number的dep筐子里装着computedWatcher，computedWatcher的dep筐子里装着渲染watcher。
此时如果更新data.number的话，会一级一级往上触发更新。会触发computedWatcher的update，我们肯定会对被设置为computed特性的watcher做特殊的处理，这个watcher的筐子里装着渲染watcher，所以只需要触发 this.dep.notify()，就会触发渲染watcher的update方法，从而更新视图。
下面来改造代码：

// Watcher
import Dep, { pushTarget, popTarget } from './dep'
export default class Watcher {
 constructor(getter, options = {}) {
  const { computed } = options
  this.getter = getter
  this.computed = computed
  if (computed) {
   this.dep = new Dep()
  } else {
   this.get()
  }
 }
 get() {
  pushTarget(this)
  this.value = this.getter()
  popTarget()
  return this.value
 }
 // 仅为computed使用
 depend() {
  this.dep.depend()
 }
 update() {
  if (this.computed) {
   this.get()
   this.dep.notify()
  } else {
   this.get()
  }
 }
}

computed初始化：

// computed
import Watcher from './watcher'
export default function computed(getter) {
 let def = {}
 const computedWatcher = new Watcher(getter, { computed: true })
 Object.defineProperty(def, 'value', {
  get() {
   // 先让computedWatcher收集渲染watcher作为自己的依赖。
   computedWatcher.depend()
   return computedWatcher.get()
  }
 })
 return def
}

这里的逻辑比较绕，如果没理清楚的话可以把代码下载下来一步步断点调试，data.number被劫持的set触发以后，可以看一下number的dep到底存了什么。

watch

watch的使用方式是这样的：

watch(
 () => data.msg,
 (newVal, oldVal) => {
  console.log('newVal: ', newVal)
  console.log('old: ', oldVal)
 }
)

传入的第一个参数是个函数，里面需要读取到响应式的属性，确保依赖能被收集到，这样下次这个响应式的属性发生改变后，就会打印出对饮的新值和旧值。

分析一下watch的实现原理，这里依然是利用Watcher类去实现，我们把用于watch的watcher叫做watchWatcher，传入的getter函数也就是() => data.msg，Watcher在执行它之前还是一样会把自身（也就是watchWatcher）设为Dep.target，这时读到data.msg，就会把watchWatcher丢进data.msg的依赖筐子里。