当前位置：首页 > VUE

vue computed 实现原理

2026-03-29 11:37:55VUE

在 Vue.js 中，computed 属性的实现原理主要依赖于响应式系统和依赖收集机制。以下是 computed 属性的核心实现原理：

1. 响应式依赖

Vue 的 computed 属性是基于其响应式系统实现的。每个计算属性本质上是一个 getter 函数，当计算属性被访问时，Vue 会执行这个 getter 函数，并收集其中访问的所有响应式依赖（如 data 或 props 中的属性）。

vue computed 实现原理

2. 依赖收集

Vue 使用 Watcher 类来跟踪依赖关系。计算属性的 getter 会被包裹在一个 Watcher 中，当计算属性被访问时：

执行 getter 函数。
在 getter 执行过程中，如果访问了其他响应式数据，这些数据的 getter 会触发，将当前的 Watcher 添加到它们的依赖列表中（即“依赖收集”）。

3. 缓存机制

计算属性具有缓存功能：

vue computed 实现原理

只有当其依赖的响应式数据发生变化时，计算属性才会重新计算。
如果依赖没有变化，多次访问计算属性会直接返回缓存的值，而不会重新执行 getter。

4. 惰性求值

计算属性是惰性的，即：

如果没有访问计算属性，它的 getter 不会执行。
只有在其依赖的响应式数据变化时，才会标记为“脏”（dirty），并在下次访问时重新计算。

5. 实现伪代码

以下是简化的 computed 实现逻辑：

class Watcher {
  constructor(vm, fn) {
    this.vm = vm;
    this.getter = fn;
    this.dirty = true; // 标记是否需要重新计算
    this.value = undefined;
    this.deps = []; // 依赖列表
  }

  evaluate() {
    this.value = this.getter.call(this.vm);
    this.dirty = false;
  }

  update() {
    this.dirty = true; // 依赖变化时标记为脏
  }
}

function defineComputed(target, key, getter) {
  const watcher = new Watcher(target, getter);

  Object.defineProperty(target, key, {
    get() {
      if (watcher.dirty) {
        watcher.evaluate();
      }
      return watcher.value;
    }
  });
}