Vue3响应式系统可视化

// 简化的Vue3响应式系统实现
const targetMap = new WeakMap();
let activeEffect = null;

// 创建响应式对象
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver);
      track(target, key); // 收集依赖
      if (typeof res === 'object' && res !== null) {
        return reactive(res); // 递归处理嵌套对象
      }
      return res;
    },
    set(target, key, newValue, receiver) {
      const oldValue = target[key];
      if (newValue !== oldValue) {
        trigger(target, key); // 触发更新
      }
      return Reflect.set(target, key, newValue, receiver);
    }
  });
}

// 收集依赖
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) {
    dep = new Set();
    depsMap.set(key, dep);
  }
  if (!dep.has(activeEffect)) {
    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.run());
  }
}

// Effect类
class Effect {
  constructor(fn, name) {
    this.fn = fn;
    this.name = name;
  }
  
  run() {
    try {
      activeEffect = this;
      return this.fn();
    } finally {
      activeEffect = null;
    }
  }
}