当前位置：首页 > VUE

vue计算属性的实现

2026-01-22 19:51:24VUE

Vue 计算属性的实现原理

Vue 的计算属性（Computed Properties）是基于响应式依赖进行缓存的特性，其核心实现依赖于 Watcher 和依赖收集机制。

计算属性的初始化

在 Vue 初始化阶段，会通过 initComputed 函数处理计算属性。每个计算属性会创建一个对应的 Watcher 实例，并将计算属性的 getter 函数作为 Watcher 的求值函数。

vue计算属性的实现

function initComputed(vm, computed) {
  const watchers = vm._computedWatchers = Object.create(null);
  for (const key in computed) {
    const getter = computed[key];
    watchers[key] = new Watcher(
      vm,
      getter || function() {},
      noop,
      { lazy: true } // 标记为计算属性 Watcher
    );
    defineComputed(vm, key, getter);
  }
}

计算属性的缓存机制

计算属性通过 dirty 标志位实现缓存。当依赖的响应式数据未变化时，直接返回缓存值；当依赖变化时，标记 dirty 为 true，下次访问时重新计算。

vue计算属性的实现

function evaluate() {
  this.value = this.get();
  this.dirty = false;
}

function update() {
  this.dirty = true;
}

依赖收集过程

计算属性在首次访问时会执行 getter 函数，触发依赖收集：

计算属性 Watcher 将自身设置为 Dep.target
执行 getter 函数时访问响应式数据，触发数据的 getter
响应式数据的 dep 会收集计算属性 Watcher 作为依赖

function createComputedGetter(key) {
  return function computedGetter() {
    const watcher = this._computedWatchers[key];
    if (watcher.dirty) {
      watcher.evaluate();
    }
    if (Dep.target) {
      watcher.depend();
    }
    return watcher.value;
  }
}

与普通属性的区别

延迟计算：只有被访问时才会计算
缓存机制：依赖未变化时返回缓存值
依赖追踪：自动追踪所有响应式依赖

实现示例代码

以下是简化版的计算属性实现：

class ComputedRef {
  constructor(getter) {
    this._dirty = true;
    this._value = undefined;
    this._getter = getter;
    effect(() => this._getter(), {
      scheduler: () => {
        if (!this._dirty) {
          this._dirty = true;
          trigger(this, "value");
        }
      }
    });
  }

  get value() {
    if (this._dirty) {
      this._value = this._getter();
      this._dirty = false;
      track(this, "value");
    }
    return this._value;
  }
}

计算属性的这种实现方式确保了高效的数据更新和渲染性能，是 Vue 响应式系统的重要组成部分。