风动之石的博客

Watcher

源码

释疑

哪些情况下会产生 Watcher？

  • 渲染 Watcher（vm._watcher）
  • 计算属性 Watcher
  • 用户 Watcher（通过Vue.prototype.$watch和组件对象的watchers属性产生）

Watcher 实例的 deps / newDeps，有什么区别？

我们发现，Watcher 实例上不仅有deps/depIds属性，还有newDeps/newDepIds属性，这两组属性有什么区别呢？我们只要分析实例上的get、addDep和cleanupDeps方法就能知晓了。

export default class Watcher {
  // ...
  /**
   * 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
  }
  // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

get方法的作用是计算watcher表达式的值，计算之前会调用pushTarget(this)将之前的Dep.target推入栈中并将watcher设置为当前的Dep.target。如此若是在计算表达式的过程中获取了响应式属性的值，就会通过watcher.addDep方法给watcher添加依赖，而所有的依赖都将添加到watcher.newDeps里，watcher.newDepIds里是依赖对应的id。而当watcher的表达式计算完成之后，会调用popTarget()还原之前的Dep.target。最后会调用cleanupDeps方法清理依赖。玄妙就在这里。

cleanupDeps所做的处理是：

  1. 遍历deps，找出不在newDeps里的dep，将当前watcher从dep的订阅者移除
  2. 将newDeps赋给deps，清空newDeps

经过第一步的操作后，不在newDeps里的dep与watcher解除了发布订阅关系，当dep发生改变之后，再也无法通知watcher了。

经过第二步之后，deps里保存的就是最新一次收集到的所有依赖。

如此，我们明白了，watcher在上一次收集的依赖与最新一次收集的依赖可能不完全一样，以前的依赖dep现在不依赖了，为了防止不依赖的dep在改变之后继续通知watcher进行更新，就需要将watcher从dep的订阅者里移除掉，这样就防止watcher不必要的重新计算了。

意思基本上懂了，我们来简单看个示例：

vm.$watch(function () {
  return this.a === 1 ? this.b : this.c
}, function () {
  console.log('watcher 改变啦！')
})
1
2
3
4
5

我们通过vm.$watch创建了一新的watcher，表面上看计算表达式的值时，会将this.a、this.b、this.c都作为依赖。但是事实上是，当this.a为1时，根本不会去获取this.c的值，也就不会将this.c作为依赖，因而watcher只依赖了this.a和this.b；同理，当this.a不为1时，watcher只依赖了this.a和this.c。

  1. 假设一开始this.a为1，watcher表达式的结果就是this.b；watcher的依赖是this.a、this.b；当this.b改变后，watcher就需要重新计算以获取表达式最新的值。
  2. 现在修改this.a为2，引起了watcher重新计算表达式，其结果为this.c；watcher的依赖变为this.a、this.c。

经过watcher.cleanupDeps()之后，现在this.b再改变时，watcher就不需要重新计算表达式了！

watcher 是如何实现 deep: true 深度监听的？

只要watcher的某一个依赖的子孙属性发生变化，就会触发watcher重新计算表达式，如有必要，执行监听的回调函数。

export default class Watcher {
  // ...

  /**
   * Evaluate the getter, and re-collect dependencies.
   * 计算表达式的值，并重新收集依赖
   */
  get () {
    // 将当前 watcher 设置为全局的 Dep.target，方便该 watcher 依赖的 dep 将该 watcher 添加到订阅列表里
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      // 此处，会收集计算过程中的依赖
      value = this.getter.call(vm, vm)
    } catch (e) {
      if (this.user) {
        // 如果是用户创造的 watcher，计算出错的话需要报错
        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) {
        // 此处，如果是深度 watch，则收集 value 下的所有响应式属性作为依赖
        // 其原理是，不断的获取 value 下面的每一个属性值（只获取，不作其他任何改变操作），触发所有依赖将 Dep.target（此时还是当前正在计算表达式的 watcher）添加到订阅列表里
        traverse(value)
      }
      // 当前 watcher 计算结束，将 Dep.target 设置为原先的值
      popTarget()
      this.cleanupDeps()
    }
    return value
  }

  // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

可以发现，当对watcher是深度监听时，执行了traverse(value)，这个操作是获取表达式计算的返回值下的每一个子孙属性的属性值，以将在获取时的求值过程中发现的依赖添加到当前watcher的deps里。

// src/core/observer/travesrse.js
import { _Set as Set, isObject } from '../util/index'
import type { SimpleSet } from '../util/index'
import VNode from '../vdom/vnode'

const seenObjects = new Set()

/**
 * Recursively traverse an object to evoke all converted
 * getters, so that every nested property inside the object
 * is collected as a "deep" dependency.
 */
export function traverse (val: any) {
  _traverse(val, seenObjects)
  seenObjects.clear()
}

function _traverse (val: any, seen: SimpleSet) {
  let i, keys
  const isA = Array.isArray(val)
  if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) {
    return
  }
  if (val.__ob__) {
    const depId = val.__ob__.dep.id
    if (seen.has(depId)) {
      return
    }
    seen.add(depId)
  }
  if (isA) {
    i = val.length
    // 获取每个数组每个元素值的同时，也在让当前的 Dep.target 收集依赖
    while (i--) _traverse(val[i], seen)
  } else {
    keys = Object.keys(val)
    i = keys.length
    // 获取对象每个 key 的 value 的同时，也在让当前的 Dep.target 收集依赖
    while (i--) _traverse(val[keys[i]], seen)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

哪些情况下 watcher 的回调函数会执行？

通过学习源码，我们发现在以下三种情况下会执行回调函数（前提是表达式进行了重新求值）：

  • 所监听的表达式的返回值value改变了（原始值改变，或者是对象的引用改变）
  • 所监听的表达式的返回值value是对象或数组（即使value的引用没改变）
  • 深度监听表达式时。
export default class Watcher {
  /**
   * Scheduler job interface.
   * Will be called by the scheduler.
   * 依赖改变时，最终会调用该函数
   */
  run () {
    if (this.active) {
      const value = this.get()
      if (
        // 以下三种情况需要调用监听回调函数：
        // 1、表达式的返回值 value 改变了（原始值，或者是对象的引用）
        // 2、表达式的返回值 value 是对象或数组（即使 value 的引用没改变）
        // 3、深度监听的，不管最终的返回值是否改变，都要执行回调。（因为 watcher 依赖的 dep 的子孙属性改变了）
        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)
        }
      }
    }
  }
  // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

针对于第一点，我们比较好理解，毕竟返回的值都改变了，肯定是要执行回调函数的。

但是针对第二点，表达式的返回值时对象或数组时，即使引用没改变，为什么要执行回调函数呢？按照源码的英文注释，即使返回的是同一引用，但是引用的子孙属性可能发生变化了。我猜想，因为返回的对象不一定是响应式的，我们无法知道（或者是比较难知道？）引用的子孙属性发生变化，因此统一处理成执行回调函数。我们来验证一下。

const OBJECT = {}
export default {
  name: 'App',
  data: function () {
    return {
      a: 1
    }
  },
  created () {
    this.$watch(() => {
      const a = this.a
      return OBJECT
    }, function () {
      console.log('$watch 回调执行啦，尽管 OBJECT 没改变！')
    })
    this.a = 2
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

结果打印：$watch 回调执行啦，尽管 OBJECT 没改变！

我们可以看到，监听的表达式的返回值时一常量对象OBJECT，我们并没有改变它，但是当我们改变表达式的依赖data.a时，回调函数居然执行了！（其实上，表达式并没有实际依赖data.a，只是在计算表达式的值时，会获取data.a的值，导致data.a成了表达式的依赖项了）