重学Vue源码，根据黄轶大佬的vue技术揭秘，逐个过一遍，巩固一下vue源码知识点，毕竟嚼碎了才是自己的，所有文章都同步在 公众号(道道里的前端栈) 和 github 上。

正文

在响应式对象里提到，Vue会把普通对象变成一个响应式对象，它的 getter 是用来做依赖收集的，具体这个依赖收集是怎么做的，这篇来过一下。

在把对象变成响应式的过程中有一个 defineReactive 方法：

export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }

  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()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    // ...
  })
}

之前有说到，在访问响应式对象属性的时候会走它的 get，依赖收集是在 get 中完成的，在这个方法里，首先拿到 getter 并进行判断之后，拿到一个 value(因为访问某个属性的话肯定得返回它的值)，所以方法最终返回了 value，而中间的 Dep.target 就是依赖收集的过程了，来看下这个 Dep 是干什么的。

Dep

Dep 是整个 getter 依赖收集的核心，它定义在 src/core/observer/dep.js：

export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = []
  }

  addSub (sub: Watcher) {
    this.subs.push(sub)
  }

  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }

  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

  notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

简单看下大概能看出来它和 Watcher 有关系，其实它是和 Watcher 中间建立了一个桥梁。

Dep 是一个类，有一个静态属性 target，是一个 Watcher，实际上 Dep.target 就是一个全局的 Watcher，因为在同一时间只能有一个全局的 Watcher 被计算，所以这个 target 就是当前正在计算的 Watcher。除了 target 之外，还有两个私有属性：id 和 subs，id 就是 uid，每次创建一个 Dep 就会自增一次，subs 就是订阅数据变化的 Watcher 数组。

回到 get，如果有 Dep.target，就会执行一个 dep.depend()，这个小 dep 在执行 defineReactive 的时候就已经被实例化了：const dep = new Dep()，然后它会在后面调用 depend 方法，depend 里面会调用 Dep.target.addDep 方法，也就是调用 Watcher.addDep，接着 get 里会调用 childOb，这个判断就是 如果 val 是一个对象，并且它有 childOb 的时候，就调用 childOb.dep.depend()，后面又调用了一个 dependArray(这里现值分析dep)。

Watcher

刚才提到一个 depend 方法里有一个： Dep.target.addDep(this)，就是调用 Watcher.addDep，那这个 addDep 应该就和 Watcher 有关了，这个方法定义在 Watcher 里，代码在 src/core/observer/watcher.js：

let uid = 0

/**
 * A watcher parses an expression, collects dependencies,
 * and fires callback when the expression value changes.
 * This is used for both the $watch() api and directives.
 */
export default class Watcher {
  vm: Component;
  expression: string;
  cb: Function;
  id: number;
  deep: boolean;
  user: boolean;
  computed: boolean;
  sync: boolean;
  dirty: boolean;
  active: boolean;
  dep: Dep;
  deps: Array<Dep>;
  newDeps: Array<Dep>;
  depIds: SimpleSet;
  newDepIds: SimpleSet;
  before: ?Function;
  getter: Function;
  value: any;

  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this)
    // options
    if (options) {
      this.deep = !!options.deep
      this.user = !!options.user
      this.computed = !!options.computed
      this.sync = !!options.sync
      this.before = options.before
    } else {
      this.deep = this.user = this.computed = this.sync = false
    }
    this.cb = cb
    this.id = ++uid // uid for batching
    this.active = true
    this.dirty = this.computed // for computed watchers
    this.deps = []
    this.newDeps = []
    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') {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = function () {}
        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
        )
      }
    }
    if (this.computed) {
      this.value = undefined
      this.dep = new Dep()
    } else {
      this.value = this.get()
    }
  }

  /**
   * Evaluate the getter, and re-collect dependencies.
   */
  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
  }

  /**
   * Add a dependency to this directive.
   */
  addDep (dep: Dep) {
    const id = dep.id
    if (!this.newDepIds.has(id)) {
      this.newDepIds.add(id)
      this.newDeps.push(dep)
      if (!this.depIds.has(id)) {
        dep.addSub(this)
      }
    }
  }

  /**
   * Clean up for dependency collection.
   */
  cleanupDeps () {
    let i = this.deps.length
    while (i--) {
      const dep = this.deps[i]
      if (!this.newDepIds.has(dep.id)) {
        dep.removeSub(this)
      }
    }
    let tmp = this.depIds
    this.depIds = this.newDepIds
    this.newDepIds = tmp
    this.newDepIds.clear()
    tmp = this.deps
    this.deps = this.newDeps
    this.newDeps = tmp
    this.newDeps.length = 0
  }
  // ...
}

在之前提渲染Watcher的时候有提到过它，new Watcher 除了求值的方法，还定义了 addDep 和 cleanupDeps 方法。前面说到，访问数据对象就会触发它们的 getter 方法，那这些对象在什么时候访问呢？回忆一下之前说过的 mountComponent 函数，在Vue 进行到 mount 的时候会执行这个函数，里面还有一段很重要的逻辑：

updateComponent = () => {
  vm._update(vm._render(), hydrating)
}
new Watcher(vm, updateComponent, noop, {
  before () {
    if (vm._isMounted) {
      callHook(vm, 'beforeUpdate')
    }
  }
}, true /* isRenderWatcher */)

当实例化一个 渲染watcher 的时候，首先进入 watcher 的构造函数逻辑，然后会执行它的 this.get() 方法，从而进入 get 函数，首先会执行一个 pushTarget(this)：

export function pushTarget (_target: Watcher) {
  if (Dep.target) targetStack.push(Dep.target)
  Dep.target = _target
}

实际上就是把 Dep.target 赋值为当前的渲染wather，并且还定义了一个 targetStack 数组，如当前有 Dep.target，就放到 targetStack 里面去，目的是在 pop 的时候也可以获取到。

接着后面又执行了：

value = this.getter.call(vm, vm)

这个 this.getter 对应就是 updateComponent 函数，因为在 Watcher的定义里，有一个 this.getter = expOrFn，expOrFn 就是传入的第二个参数，也就是 updateComponent 方法，也就是说会执行 vm._update(vm._render(), hydrating)，在执行 vm._render 的时候，会有一个 vnode = render.call(vm._renderProxy, vm.$createElement)，在这一步可以访问到我们模板里定义的数据，此时就可以访问到数据的 getter，也就是访问到 observe 里的 get：

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()
        if (Array.isArray(value)) {
          dependArray(value)
        }
      }
    }
    return value
  },
  // ...
}

然后这里的 Dep.target 就是渲染watcher，接着在执行 dep.depend 的时候，就会执行 Dep.target.addDep(this) 了，也就是执行：

addDep (dep: Dep) {
  const id = dep.id
  if (!this.newDepIds.has(id)) {
    this.newDepIds.add(id)
    this.newDeps.push(dep)
    if (!this.depIds.has(id)) {
      dep.addSub(this)
    }
  }
}

如果 newDepIds 没有 id，就 add 和 push，如果 depIds 也没有 id，就执行 dep.addSub(this)，也就是：

addSub(sub: Watcher){
  this.subs.push(sub)
}

就是说在使用render的时候，就会触发数据的 get，就会走 dep.depend()，最终 watcher 就会走 addSub，然后把 Watcher 添加到 subs 上，这样就相当于 Watcher 就是数据的订阅者。

捋一遍：进行 vm._render 方法会生成渲染VNode，这个过程中会对 vm 上的数据访问，此时就触发了数据对象的 get，然后每一个键值的 get 都带一个 dep，在触发 get 方法的时候会调用这个 dep.depend() 方法，也就会执行 Dep.target.addDep(this)，此时 Dep.target 已经被赋值成了 渲染watcher，所以就执行到 addDep 方法，该方法里面保证了同一个数据不会被添加多次，然后执行 dep.addSub(this)，接着执行 this.subs.push(sub)，这样当前的 watcher 就订阅到这个数据带的 dep 的 subs 中了。

所以，在render过程中，就会触发所有数据的 getter，这样就已经是一个依赖收集的过程。

接着执行了一个 popTarget()：

Dep.target = targetStack.pop()

也就是把 Dep.target 恢复到上一个状态，因为当前vm的依赖收集已经完毕了，所以对应的 渲染watcher，也就是 Dep.target 也得回去。

最后执行一个 this.cleanupDeps()：

cleanupDeps () {
  let i = this.deps.length
  while (i--) {
    const dep = this.deps[i]
    if (!this.newDepIds.has(dep.id)) {
      dep.removeSub(this)
    }
  }
  let tmp = this.depIds
  this.depIds = this.newDepIds
  this.newDepIds = tmp
  this.newDepIds.clear()
  tmp = this.deps
  this.deps = this.newDeps
  this.newDeps = tmp
  this.newDeps.length = 0
}

由于Vue的数据驱动，每次更新数据都会重新render一次，也就导致了 vm._render 会再次执行，并再次触发数据的 getter，所以 Watcher 在构造函数里有2个 Dep 数组：

this.deps = []
this.newDeps = []
this.depIds = new Set()
this.newDepIds = new Set()

在执行 cleanupDeps 的时候，会首先遍历 deps，移除 dep.subs 数组中的 Watcher 订阅，然后把 newDepIds 和 depIds 交换， newDeps 和 deps 交换，并把这两个数组清空。

有一种场景，我们的模板会根据 v-if 去渲染不同子模板 a 和 b，当我们满足某种条件的时候渲染 a 的时候，会访问到 a 中的数据，这时候我们对 a 使用的数据添加了 getter，做了依赖收集，那么当我们去修改 a 的数据的时候，理应通知到这些订阅者。那么如果我们一旦改变了条件渲染了 b 模板，又会对 b 使用的数据添加了 getter，如果我们没有依赖移除的过程，那么这时候我去修改 a 模板的数据，会通知 a 数据的订阅的回调，这显然是有浪费的。

总结

某个响应式数据正在触发getter(依赖收集)的时候，收集的就是当前正在计算的watcher，然后把watche作为数据的订阅者，从而形成一种绑定关系，这样在触发setter(派发更新)的时候，可以知道应当通知哪些订阅者去做响应的处理。

我的公众号：道道里的前端栈，每一天一篇前端文章，嚼碎的感觉真奇妙~