Vue会把普通对象变成响应式对象，响应式对象getter相关的逻辑就是依赖收集

defineReactive

  1. /**
  2.  * Define a reactive property on an Object.
  3.  */
  4. export function defineReactive (
  5.   obj: Object,
  6.   key: string,
  7.   val: any,
  8.   customSetter?: ?Function,
  9.   shallow?: boolean
  10. ) {
  11.   // 实例化一个Deo的实例
  12.   const dep = new Dep()
  13.     // ...
  15.   let childOb = !shallow && observe(val)
  16.   Object.defineProperty(obj, key, {
  17.     enumerable: true,
  18.     configurable: true,
  19.     get: function reactiveGetter () {
  20.       const value = getter ? getter.call(obj) : val
  21.       if (Dep.target) {
  22.         dep.depend() // 做依赖收集
  23.         if (childOb) {
  24.           childOb.dep.depend()
  25.           if (Array.isArray(value)) {
  26.             dependArray(value)
  27.           }
  28.         }
  29.       }
  30.       return value
  31.     },
  32.     set: function reactiveSetter (newVal) {
  33.       // ...
  34.     }
  35.   })
  36. }

Dep

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

  1. /* @flow */
  3. import type Watcher from './watcher'
  4. import { remove } from '../util/index'
  5. import config from '../config'
  7. let uid = 0
  9. /**
  10.  * A dep is an observable that can have multiple
  11.  * directives subscribing to it.
  12.  */
  13. export default class Dep {
  14.   // 静态属性，全局唯一Watcher
  15.   static target: ?Watcher; // 在同一时间只能有一个全局的Watcher被计算
  16.   id: number;
  17.   subs: Array<Watcher>; // Watcher数组
  19.   constructor () {
  20.     this.id = uid++
  21.     this.subs = []
  22.   }
  24.   addSub (sub: Watcher) {
  25.     this.subs.push(sub)
  26.   }
  28.   removeSub (sub: Watcher) {
  29.     remove(this.subs, sub)
  30.   }
  32.   depend () {
  33.     if (Dep.target) {
  34.       Dep.target.addDep(this)
  35.     }
  36.   }
  38.   notify () {
  39.     // stabilize the subscriber list first
  40.     const subs = this.subs.slice()
  41.     if (process.env.NODE_ENV !== 'production' && !config.async) {
  42.       // subs aren't sorted in scheduler if not running async
  43.       // we need to sort them now to make sure they fire in correct
  44.       // order
  45.       subs.sort((a, b) => a.id - b.id)
  46.     }
  47.     for (let i = 0, l = subs.length; i < l; i++) {
  48.       subs[i].update()
  49.     }
  50.   }
  51. }
  53. // The current target watcher being evaluated.
  54. // This is globally unique because only one watcher
  55. // can be evaluated at a time.
  56. Dep.target = null
  57. const targetStack = []
  59. export function pushTarget (target: ?Watcher) {
  60.   targetStack.push(target)
  61.   Dep.target = target
  62. }
  64. export function popTarget () {
  65.   targetStack.pop()
  66.   Dep.target = targetStack[targetStack.length - 1]
  67. }

Dep实际上是对Watcher的一种管理，Dep脱离Watcher单独存在是没有意义的

Watcher

Watcher的实现定义在src/core/observer/watcher.js中

  1. let uid = 0
  3. /**
  4.  * A watcher parses an expression, collects dependencies,
  5.  * and fires callback when the expression value changes.
  6.  * This is used for both the $watch() api and directives.
  7.  */
  8. export default class Watcher {
  9.   vm: Component;
  10.   expression: string;
  11.   cb: Function;
  12.   id: number;
  13.   deep: boolean;
  14.   user: boolean;
  15.   lazy: boolean;
  16.   sync: boolean;
  17.   dirty: boolean;
  18.   active: boolean;
  19.   deps: Array<Dep>;
  20.   newDeps: Array<Dep>;
  21.   depIds: SimpleSet;
  22.   newDepIds: SimpleSet;
  23.   before: ?Function;
  24.   getter: Function;
  25.   value: any;
  27.   constructor (
  28.     vm: Component,
  29.     expOrFn: string | Function,
  30.     cb: Function,
  31.     options?: ?Object,
  32.     isRenderWatcher?: boolean
  33.   ) {
  34.     this.vm = vm
  35.     if (isRenderWatcher) {
  36.       vm._watcher = this
  37.     }
  38.     vm._watchers.push(this)
  39.     // options
  40.     if (options) {
  41.       this.deep = !!options.deep
  42.       this.user = !!options.user
  43.       this.lazy = !!options.lazy
  44.       this.sync = !!options.sync
  45.       this.before = options.before
  46.     } else {
  47.       this.deep = this.user = this.lazy = this.sync = false
  48.     }
  49.     this.cb = cb
  50.     this.id = ++uid // uid for batching
  51.     this.active = true
  52.     this.dirty = this.lazy // for lazy watchers
  53.     this.deps = [] // 表示Watcher实例特有的Dep实例的数组
  54.     this.newDeps = [] // 表示Watcher实例特有的Dep实例的数组
  55.     this.depIds = new Set() // 代表this.deps的id
  56.     this.newDepIds = new Set() // 代表this.newDeps的id
  57.     this.expression = process.env.NODE_ENV !== 'production'
  58.       ? expOrFn.toString()
  59.       : ''
  60.     // parse expression for getter
  61.     if (typeof expOrFn === 'function') {
  62.       this.getter = expOrFn
  63.     } else {
  64.       this.getter = parsePath(expOrFn)
  65.       if (!this.getter) {
  66.         this.getter = noop
  67.         process.env.NODE_ENV !== 'production' && warn(
  68.           `Failed watching path: "${expOrFn}" ` +
  69.           'Watcher only accepts simple dot-delimited paths. ' +
  70.           'For full control, use a function instead.',
  71.           vm
  72.         )
  73.       }
  74.     }
  75.     this.value = this.lazy
  76.       ? undefined
  77.       : this.get()
  78.   }
  80.   /**
  81.    * Evaluate the getter, and re-collect dependencies.
  82.    */
  83.   get () {
  84.     pushTarget(this)
  85.     let value
  86.     const vm = this.vm
  87.     try {
  88.       value = this.getter.call(vm, vm)
  89.     } catch (e) {
  90.       if (this.user) {
  91.         handleError(e, vm, `getter for watcher "${this.expression}"`)
  92.       } else {
  93.         throw e
  94.       }
  95.     } finally {
  96.       // "touch" every property so they are all tracked as
  97.       // dependencies for deep watching
  98.       if (this.deep) {
  99.         traverse(value)
  100.       }
  101.       popTarget()
  102.       this.cleanupDeps()
  103.     }
  104.     return value
  105.   }
  107.   /**
  108.    * Add a dependency to this directive.
  109.    */
  110.   addDep (dep: Dep) {
  111.     const id = dep.id
  112.     if (!this.newDepIds.has(id)) {
  113.       this.newDepIds.add(id)
  114.       this.newDeps.push(dep)
  115.       if (!this.depIds.has(id)) {
  116.         dep.addSub(this)
  117.       }
  118.     }
  119.   }
  121.   /**
  122.    * Clean up for dependency collection.
  123.    */
  124.   cleanupDeps () {
  125.     let i = this.deps.length
  126.     while (i--) {
  127.       const dep = this.deps[i]
  128.       if (!this.newDepIds.has(dep.id)) {
  129.         dep.removeSub(this)
  130.       }
  131.     }
  132.     let tmp = this.depIds
  133.     this.depIds = this.newDepIds
  134.     this.newDepIds = tmp
  135.     this.newDepIds.clear()
  136.     tmp = this.deps
  137.     this.deps = this.newDeps
  138.     this.newDeps = tmp
  139.     this.newDeps.length = 0
  140.   }
  142.   /**
  143.    * Subscriber interface.
  144.    * Will be called when a dependency changes.
  145.    */
  146.   update () {
  147.     /* istanbul ignore else */
  148.     if (this.lazy) {
  149.       this.dirty = true
  150.     } else if (this.sync) {
  151.       this.run()
  152.     } else {
  153.       queueWatcher(this)
  154.     }
  155.   }
  157.   /**
  158.    * Scheduler job interface.
  159.    * Will be called by the scheduler.
  160.    */
  161.   run () {
  162.     if (this.active) {
  163.       const value = this.get()
  164.       if (
  165.         value !== this.value ||
  166.         // Deep watchers and watchers on Object/Arrays should fire even
  167.         // when the value is the same, because the value may
  168.         // have mutated.
  169.         isObject(value) ||
  170.         this.deep
  171.       ) {
  172.         // set new value
  173.         const oldValue = this.value
  174.         this.value = value
  175.         if (this.user) {
  176.           const info = `callback for watcher "${this.expression}"`
  177.           invokeWithErrorHandling(this.cb, this.vm, [value, oldValue], this.vm, info)
  178.         } else {
  179.           this.cb.call(this.vm, value, oldValue)
  180.         }
  181.       }
  182.     }
  183.   }
  185.   /**
  186.    * Evaluate the value of the watcher.
  187.    * This only gets called for lazy watchers.
  188.    */
  189.   evaluate () {
  190.     this.value = this.get()
  191.     this.dirty = false
  192.   }
  194.   /**
  195.    * Depend on all deps collected by this watcher.
  196.    */
  197.   depend () {
  198.     let i = this.deps.length
  199.     while (i--) {
  200.       this.deps[i].depend()
  201.     }
  202.   }
  204.   /**
  205.    * Remove self from all dependencies' subscriber list.
  206.    */
  207.   teardown () {
  208.     if (this.active) {
  209.       // remove self from vm's watcher list
  210.       // this is a somewhat expensive operation so we skip it
  211.       // if the vm is being destroyed.
  212.       if (!this.vm._isBeingDestroyed) {
  213.         remove(this.vm._watchers, this)
  214.       }
  215.       let i = this.deps.length
  216.       while (i--) {
  217.         this.deps[i].removeSub(this)
  218.       }
  219.       this.active = false
  220.     }
  221.   }
  222. }

过程分析

Vue的mount过程是通过mountComponent函数，有如下一段重要的逻辑

  1. updateComponent = () => {
  2.   vm._update(vm._render(), hydrating)
  3. }
  4. new Watcher(vm, updateComponent, noop, {
  5.   before () {
  6.     if (vm._isMounted) {
  7.       callHook(vm, 'beforeUpdate')
  8.     }
  9.   }
  10. }, true /* isRenderWatcher */)

当实例化一个渲染watcher的时候首先进入watcher的构造函数，然后会执行this.get()方法进入get函数，接着执行

  1. pushTarget(this)

pushTarget方法定义在src/core/observer/dep.js中

  1. // 把Dep.target赋值为当前的渲染watcher并压栈（为了恢复用）
  2. export function pushTarget (target: ?Watcher) {
  3.   targetStack.push(target)
  4.   Dep.target = target
  5. }

接着又执行

  1. value = this.getter.call(vm, vm) // this.getter对应就是updateComponent函数

实际上就是在执行

  1. vm._update(vm._render(), hydrating) // 会先执行vm.render()方法，这个方法会生成渲染VNode，并且在这个过程中会对vm上的数据进行访问，这个时候就触发了数据对象的getter

每个对象值的getter都持有一个dep，在触发getter的时候会调用dep.depend()方法，也就会执行Dep.target.addDep(this)
Dep.target已经被赋值为渲染watcher，那么就执行到addDep方法

  1. /**
  2. * Add a dependency to this directive.
  3. */
  4. addDep (dep: Dep) {
  5.   const id = dep.id
  6.   if (!this.newDepIds.has(id)) { 
  7.     this.newDepIds.add(id)
  8.     this.newDeps.push(dep)
  9.     if (!this.depIds.has(id)) { // 保证同一数据不会被添加多次
  10.       dep.addSub(this)
  11.     }
  12.   }
  13. }

执行 dep.addSub(this) 后就会执行 this.subs.push(sub)，也就是说把当前的watcher订阅到这个数据持有的dep的subs中，这个的目的是为后续数据变化时能通知到哪些subs做准备
在vm.render()过程中会触发所有数据的getter，这样实际上已经完成了一个依赖收集的过程
其实并没有，在完成依赖收集后还有内容

  1. // "touch" every property so they are all tracked as
  2. // dependencies for deep watching
  3. // 递归去访问value，触发它所有子项的getter
  4. if (this.deep) {
  5.   traverse(value)
  6. }
  7. popTarget()
  8. this.cleanupDeps()

popTarget方法定义在src/core/observer/dep.js中

  1. // 把Dep.target恢复成上一个状态，因为当前vm的数据依赖收集已经完成，那么对应的渲染Dep.target也需要改变
  2. export function popTarget () {
  3.   targetStack.pop()
  4.   Dep.target = targetStack[targetStack.length - 1]
  5. }

cleanupDeps依赖清空
Vue 是数据驱动的，所以每次数据变化都会重新 render，那么 vm._render() 方法又会再次执行，并再次触发数据的 getters，所以 Watcher 在构造函数中会初始化 2 个 Dep 实例数组，newDeps 表示新添加的 Dep 实例数组，而 deps 表示上一次添加的 Dep 实例数组

  1. /**
  2. * Clean up for dependency collection.
  3. */
  4. cleanupDeps () {
  5.   let i = this.deps.length
  6.   while (i--) {
  7.     const dep = this.deps[i]
  8.     if (!this.newDepIds.has(dep.id)) {
  9.       dep.removeSub(this) // 移除对dep.subs数组中Watcher的订阅
  10.     }
  11.   }
  12.   // 把newDepIds和depIds交换
  13.   let tmp = this.depIds
  14.   this.depIds = this.newDepIds
  15.   this.newDepIds = tmp
  16.   // 把newDepIds清空
  17.   this.newDepIds.clear()
  18.   // 把newDeps和deps交换
  19.   tmp = this.deps
  20.   this.deps = this.newDeps
  21.   this.newDeps = tmp
  22.   // 把newDeps清空
  23.   this.newDeps.length = 0
  24. }

为什么需要做 deps 订阅的移除呢，在添加 deps 的订阅过程，已经能通过 id 去重避免重复订阅了
考虑到一种场景，模板会根据 v-if 去渲染不同子模板 a 和 b，当满足某种条件的时候渲染 a 的时候，会访问到 a 中的数据，这时候对 a 使用的数据添加了 getter，做了依赖收集，那么当去修改 a 的数据的时候，理应通知到这些订阅者。那么如果改变了条件渲染了 b 模板，又会对 b 使用的数据添加了 getter，如果没有依赖移除的过程，那么这时候会去修改 a 模板的数据，会通知 a 数据的订阅的回调，这显然是有浪费的
因此 Vue 设计了在每次添加完新的订阅，会移除掉旧的订阅，这样就保证了在刚才的场景中，如果渲染 b 模板的时候去修改 a 模板的数据，a 数据订阅回调已经被移除了，所以不会有任何浪费