当前位置：首页 > VUE

vue依赖收集的实现

2026-01-22 03:51:53VUE

Vue 依赖收集的实现原理

Vue 的依赖收集是通过响应式系统实现的，核心在于 Observer、Dep 和 Watcher 三者的协作。

响应式数据初始化

通过 Object.defineProperty 或 Proxy（Vue 3）劫持数据对象的属性访问。在 getter 中触发依赖收集，在 setter 中触发更新通知。

vue依赖收集的实现

function defineReactive(obj, key, val) {
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) {
        dep.depend(); // 收集依赖
      }
      return val;
    },
    set(newVal) {
      if (val === newVal) return;
      val = newVal;
      dep.notify(); // 触发更新
    }
  });
}

Dep 类管理依赖

Dep 是依赖管理器，每个响应式属性对应一个 Dep 实例，用于存储所有依赖该属性的 Watcher。

vue依赖收集的实现

class Dep {
  constructor() {
    this.subs = []; // 存储 Watcher 实例
  }
  depend() {
    if (Dep.target) {
      this.subs.push(Dep.target); // 添加 Watcher
    }
  }
  notify() {
    this.subs.forEach(watcher => watcher.update()); // 通知更新
  }
}
Dep.target = null; // 全局唯一 Watcher 标记

Watcher 类触发依赖

Watcher 是观察者，在组件渲染或计算属性求值时被创建。它会将自身赋值给 Dep.target，触发属性的 getter 从而完成依赖收集。

class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm;
    this.getter = parsePath(expOrFn);
    this.cb = cb;
    this.value = this.get();
  }
  get() {
    Dep.target = this; // 标记当前 Watcher
    const value = this.getter.call(this.vm, this.vm); // 触发 getter
    Dep.target = null; // 收集完成后清除标记
    return value;
  }
  update() {
    this.run();
  }
  run() {
    const value = this.get();
    if (value !== this.value) {
      this.cb.call(this.vm, value, this.value);
    }
  }
}