vue数据响应式实现

Vue 数据响应式实现原理

Vue 的数据响应式是通过 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）实现的，核心是依赖收集和派发更新。

Vue 2.x 的实现

数据劫持 通过 Object.defineProperty 对对象的属性进行劫持，在 getter 中收集依赖，在 setter 中触发更新。

function defineReactive(obj, key, val) {
  const dep = new Dep(); // 依赖管理器

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

依赖收集 每个响应式属性都有一个 Dep 实例，用于管理依赖（即 Watcher 实例）。当数据被访问时，当前 Watcher 会被添加到 Dep 中。

class Dep {
  constructor() {
    this.subs = [];
  }

  depend() {
    if (Dep.target) {
      this.subs.push(Dep.target);
    }
  }

  notify() {
    this.subs.forEach(sub => sub.update());
  }
}

Watcher Watcher 是观察者，负责执行更新操作（如渲染视图）。在初始化时，会将当前 Watcher 设置为 Dep.target，触发 getter 收集依赖。

class Watcher {
  constructor(vm, key, cb) {
    this.vm = vm;
    this.key = key;
    this.cb = cb;
    Dep.target = this;
    this.value = vm[key]; // 触发 getter，收集依赖
    Dep.target = null;
  }

  update() {
    this.value = this.vm[this.key];
    this.cb(this.value);
  }
}

Vue 3.x 的实现

Vue 3.x 使用 Proxy 替代 Object.defineProperty，解决了 Vue 2.x 中无法检测数组和对象新增属性的问题。

Proxy 数据劫持 通过 Proxy 拦截对象的操作，包括属性访问、赋值、删除等。

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      track(target, key); // 收集依赖
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发更新
      return true;
    }
  });
}

依赖管理 Vue 3.x 使用 effect 替代 Watcher，通过 track 和 trigger 管理依赖。

const targetMap = new WeakMap();

function track(target, key) {
  if (!activeEffect) return;
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }
  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }
  dep.add(activeEffect);
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => effect());
  }
}

let activeEffect;

function effect(fn) {
  activeEffect = fn;
  fn();
  activeEffect = null;
}

总结

• Vue 2.x：通过 Object.defineProperty 劫持数据，结合 Dep 和 Watcher 实现依赖收集和派发更新。
• Vue 3.x：通过 Proxy 实现更全面的数据劫持，使用 effect、track 和 trigger 管理依赖，性能更好且支持更多操作。