Vue Computed 原理源码解析：揭秘响应式计算属性的秘密

从源码的角度深入解析 Vue.js Computed 原理，探索响应式计算属性背后的机制。

导言：Vue.js 中的响应式计算属性

在 Vue.js 中，Computed 属性是一个强大的工具，用于从其他属性计算出衍生值。这些属性被称为 "computed"，因为它们的值是根据其他属性动态计算出来的。Vue.js 的响应式系统会自动跟踪 Computed 属性的依赖项，并在这些依赖项发生变化时重新计算 Computed 属性的值。

Observer：监听数据变化的核心

Vue.js 的响应式系统依赖于一个名为 Observer 的类。Observer 负责监听数据对象的变化，并触发相关的更新。当一个对象被转换成一个响应式对象时，Vue.js 会创建一个新的 Observer 实例来包装它。这个 Observer 会遍历对象的属性，并为每个属性创建一个 Dep 实例。

Dep：依赖收集的中心

Dep 类用于收集对特定属性的依赖。当一个 Computed 属性被定义时，它会创建一个 Watcher 实例来监听其依赖项。Watcher 会将自己添加到相应的 Dep 实例中，这样当该属性发生变化时，Dep 就会通知 Watcher 重新计算 Computed 属性的值。

Watcher：响应式计算的桥梁

Watcher 类是响应式计算的核心。它负责监听依赖项并触发相应的更新。当一个 Computed 属性被定义时，Vue.js 会创建一个 Watcher 实例来监听其依赖项。当依赖项发生变化时，Watcher 会被通知并重新计算 Computed 属性的值。

Computed 属性源码解析

export function computed (vm, expOrFn, key) {
  // ... 省略代码 ...

  // 创建 Watcher 实例
  const watcher = new Watcher(vm, expOrFn, cb, options)
}

在 computed 函数中，当定义一个 Computed 属性时，Vue.js 会创建一个 Watcher 实例。这个 Watcher 会监听 Computed 属性的依赖项，并在这些依赖项发生变化时重新计算 Computed 属性的值。

总结：响应式计算的协作

Vue.js 的响应式计算是一个精巧的系统，通过 Observer、Dep 和 Watcher 的协作实现。Observer 监听数据变化，Dep 收集对特定属性的依赖，而 Watcher 监听依赖项并触发响应式计算。这种机制使 Vue.js 能够高效地维护响应式状态，从而实现无缝的用户界面更新。