How vuejs knows the depenedencies of computed property for caching?

In Vue.js, computed properties rely on the reactive dependency tracking mechanism to determine when to update their cached values. Here is a brief overview of how it works:

1. Dependency Collection

When a computed property is first accessed, Vue executes its getter function. During execution, the computed property accesses reactive data. Vue.js's internal reactivity system automatically detects these accesses and records the dependencies of the computed property.

2. Dependency Tracking

Each reactive data (e.g., properties in the data object) has a dependency list called Dep. When data is read, the computed property being evaluated is added to this data's dependency list. Simultaneously, the computed property records all data properties it depends on.

3. Caching Mechanism

Computed properties leverage this dependency relationship to cache their values. After the computed property's value is calculated, if its dependencies remain unchanged, subsequent accesses return the cached value directly instead of recalculating.

4. Dependency Update

When a reactive data changes, it notifies all computed properties that depend on it (i.e., all subscribers in its Dep list). These computed properties are then marked as 'dirty', indicating they need to be recalculated on the next access.

Example:

Assume the following Vue component:

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

In this example, when the computed property sum is first accessed, its value is 3, and Vue records a and b as dependencies of sum. As long as the values of a or b remain unchanged, accesses to sum return the cached value 3 directly. If the values of a or b change, Vue notifies sum to recalculate, updating the cache.

Through this mechanism, Vue.js ensures efficient computed properties by recalculating only when necessary, leveraging caching to improve performance.