javascript - Vue.js中计算属性是怎么知道它依赖的数据的？

Question

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // a computed getter
    b: function () {
      // `this` points to the vm instance
      return this.a + 1
    }
  }
})

b是怎么知道它要依赖a的？

Answer 1

Vue 中的计算属性是由 lazy watcher 实现的，而 watcher 的依赖关系是由依赖收集(dependency collection)确定的。

1. Vue 实例初始化过程中，将所有计算属性包装为 lazy watcher；

2. 首次访问计算属性时，watcher 为 dirty，此时开始计算此 watcher 的值；

3. 计算开始之前，此 watcher 将被设置为依赖目标，开始依赖收集(相关代码)；

4. 计算 watcher 值的过程中，被访问到属性的 getter 中会是检查是否存在依赖目标，若存在依赖目标就创建依赖关系(相关代码)；

5. watcher 的值计算完成后，新的依赖将被设置，旧的依赖会被删除，依赖收集完成。

6. 当依赖属性更新时，会通知自身的依赖目标，watcher 被设置为 dirty(相关代码)；

7. 再次访问该计算属性，重复计算及依赖收集步骤(3-6)。

Answer 2

你在视图中使用的数据是b
但b是如何来的呢？你在计算属性中对b的定义说明了依赖来源：this.a 啊