当前位置：首页 > VUE

vue computed实现机制

2026-03-30 12:34:20VUE

Vue computed 实现机制

Vue 的 computed 属性是基于响应式依赖的缓存机制，其核心实现依赖于 Vue 的响应式系统和 Watcher 机制。

初始化阶段

在 Vue 实例初始化时，computed 属性会被遍历并转化为 getter/setter。每个 computed 属性会创建一个对应的 Watcher 实例，并将 lazy 标志设为 true，表示这是一个惰性求值的 Watcher（不会立即执行 getter）。

vue computed实现机制

// 伪代码：初始化 computed
function initComputed(vm, computed) {
  const watchers = {};
  for (const key in computed) {
    const getter = typeof computed[key] === 'function' 
      ? computed[key] 
      : computed[key].get;
    watchers[key] = new Watcher(vm, getter, { lazy: true });
    defineComputed(vm, key, computed[key]);
  }
}

依赖收集

当模板或其它计算属性访问 computed 属性时，会触发其 getter 函数。此时会检查 Watcher 的 dirty 标志：

vue computed实现机制

如果 dirty 为 true，表示依赖可能已变化，需要重新计算值并更新缓存。
如果 dirty 为 false，直接返回缓存值。

// 伪代码：computed getter
function createComputedGetter(key) {
  return function computedGetter() {
    const watcher = this._computedWatchers[key];
    if (watcher.dirty) {
      watcher.evaluate(); // 触发计算
    }
    if (Dep.target) {
      watcher.depend(); // 依赖收集
    }
    return watcher.value;
  };
}

响应式更新

当 computed 依赖的响应式数据发生变化时，会通知所有依赖它的 Watcher。computed 的 Watcher 会将 dirty 标志设为 true，但不会立即重新计算。只有在下次访问该 computed 属性时才会触发重新计算。

// 伪代码：Watcher 更新逻辑
class Watcher {
  update() {
    if (this.lazy) {
      this.dirty = true; // 标记为脏数据，延迟计算
    } else {
      // 同步或异步更新逻辑
    }
  }
}

缓存优化

computed 的缓存特性通过 dirty 标志实现。只有当依赖变化时才会重新计算，否则直接返回缓存值。这种机制避免了重复计算，尤其适合复杂逻辑或频繁访问的场景。

与 methods 的区别

缓存：computed 基于依赖缓存，methods 每次调用都会执行。
响应式：computed 自动追踪依赖，methods 需手动处理依赖。
使用场景：computed 适合派生状态，methods 适合事件处理或需要参数的操作。

标签: 机制 vue

分享给朋友：

vue computed实现机制