从惰性执行到依赖跟踪，揭秘Vue计算属性的实现原理

2024-01-24 15:53:29

从惰性执行到依赖跟踪

在上篇《Vue响应式原理(6)-调度器实现》中，我们探讨了调度器的实现。接下来，让我们在既有响应式系统基础上引入调度器的能力，进一步实现Vue中一项重要功能：计算属性。

1. 计算属性的惰性执行实现

首先，让我们了解一下计算属性的惰性执行。惰性执行是指计算属性仅在需要时才执行，而非在每次数据更新时重新计算。这对于那些耗时的计算操作非常有用，因为可以避免不必要的计算。

在Vue中，计算属性的惰性执行是通过一个称为“watcher”的机制实现的。watcher本质上是一个观察者，它负责监视计算属性所依赖的数据源。一旦数据源发生变化，watcher就会触发计算属性的重新计算。

为了演示计算属性的惰性执行，我们编写如下代码：

const app = new Vue({
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      console.log('计算doubleCount');
      return this.count * 2;
    }
  }
});

然后，我们在控制台中打印app.doubleCount的值，并尝试修改app.count的值，看看app.doubleCount是否会重新计算。你会发现，app.doubleCount只会在app.count发生变化时重新计算，而不会在其他时间重新计算。

2. 计算属性的依赖跟踪

接下来，让我们探讨计算属性的依赖跟踪。依赖跟踪是指计算属性能够记录它所依赖的数据源。当数据源发生变化时，计算属性可以准确地知道哪些数据源发生了变化，从而只重新计算受影响的部分。

在Vue中，计算属性的依赖跟踪也是通过watcher机制实现的。当watcher被创建时，它会将自己添加到计算属性所依赖的数据源的观察者列表中。当数据源发生变化时，watcher会收到通知，并触发计算属性的重新计算。

为了演示计算属性的依赖跟踪，我们编写如下代码：

const app = new Vue({
  data() {
    return {
      count: 0,
      name: 'John Doe'
    }
  },
  computed: {
    doubleCount() {
      console.log('计算doubleCount');
      return this.count * 2;
    },
    fullName() {
      console.log('计算fullName');
      return this.name + ' ' + this.lastName;
    }
  }
});

然后，我们在控制台中打印app.doubleCount和app.fullName的值，并尝试修改app.count和app.name的值，看看app.doubleCount和app.fullName是否会重新计算。你会发现，当app.count发生变化时，app.doubleCount重新计算，而app.fullName不会重新计算。当app.name发生变化时，app.fullName重新计算，而app.doubleCount不会重新计算。这说明计算属性能够准确地跟踪其依赖的数据源，并只在必要时重新计算。