JavaScript响应式原理实现

function reactive(target) {
  return new Proxy(target, {
    get(obj, key) {
      // 收集依赖（谁在读这个属性）
      track(obj, key);
      return Reflect.get(obj, key);
    },
    set(obj, key, value) {
      // 触发更新（属性变化后通知更新）
      const result = Reflect.set(obj, key, value);
      trigger(obj, key);
      return result;
    }
  });
}

// 存储依赖关系：target -> key -> effects
const targetMap = new WeakMap();

function track(target, key) {
  if (!activeEffect) return; // 没有正在执行的副作用
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep);
  }
  dep.add(activeEffect); // 收集当前 effect
}

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 = null;

function effect(fn) {
  const effectFn = () => {
    activeEffect = effectFn;
    fn(); // 执行函数，触发 getter，从而收集依赖
    activeEffect = null;
  };
  effectFn(); // 立即执行一次
  return effectFn;
}

const state = reactive({ count: 0 });

effect(() => {
  console.log('count 更新了:', state.count);
});

state.count++; // 输出: count 更新了: 1