Vuejs 如何知道计算属性对缓存的依赖性？

在Vue.js中，计算属性依赖于响应式依赖的追踪机制来确定何时应该更新其缓存值。这里是其工作原理的简要概述：

1. 依赖收集

当计算属性被首次访问时，Vue 会执行该计算属性的 getter 函数。在执行过程中，计算属性会访问响应式数据。Vue.js 内部的响应系统会自动检测这些访问，并将计算属性的依赖项记录下来。

2. 依赖追踪

每个响应式数据（例如，data 中的属性）都有一个称为 Dep 的依赖列表。当数据被读取时，当前正在计算的计算属性会被添加到这个数据的依赖列表中。同时，这个计算属性也会记录自己所依赖的所有数据属性。

3. 缓存机制

计算属性利用这种依赖关系来缓存其值。在计算属性的值被计算后，只要它的依赖没有发生变化，再次访问计算属性时会直接返回缓存的值，而不是重新计算。

4. 依赖更新

当某个响应式数据发生变化时，它会通知所有依赖它的计算属性（即通知它的 Dep 列表中的所有订阅者）。这些计算属性随后会标记为“脏”，意味着在下次访问时需要重新计算其值。

例子

假设我们有如下的 Vue 组件：

javascript
export default {
  data() {
    return {
      a: 1,
      b: 2
    };
  },
  computed: {
    sum() {
      return this.a + this.b;
    }
  }
};

在这个例子中，计算属性 sum 首次被访问时，它的值为 3，同时 Vue 会将 a 和 b 记录为 sum 的依赖。只要 a 或 b 的值没有发生变化，对 sum 的访问都会直接返回缓存的值 3。如果 a 或 b 的值改变，Vue 会通知 sum 需要重新计算，从而更新缓存。

通过这种机制，Vue.js 能够确保计算属性的高效性，只在必要时进行重新计算，否则利用缓存提升性能。