怎样写一个 mini 响应式系统（reactive、effect、computed）？

const targetMap = new WeakMap(); // 原始对象 -> 属性名 -> 依赖它的 effect 集合
const proxyMap = new WeakMap(); // 原始对象 -> 代理，同一个对象只代理一次
let activeEffect = null;
const effectStack = [];

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()));
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect);
    activeEffect.deps.push(dep); // 反向记录，方便下次执行前清理
  }
}

function trigger(target, key) {
  const dep = targetMap.get(target)?.get(key);
  if (!dep) return;
  // 先复制一份再遍历，effect 执行时会重新收集依赖，直接遍历原集合可能死循环
  [...dep].forEach((effectFn) => {
    if (effectFn === activeEffect) return; // 避免 effect 里自增时触发自己
    if (effectFn.scheduler) effectFn.scheduler();
    else effectFn();
  });
}

function reactive(target) {
  if (proxyMap.has(target)) return proxyMap.get(target);
  const proxy = new Proxy(target, {
    get(obj, key, receiver) {
      track(obj, key);
      const value = Reflect.get(obj, key, receiver);
      // 读到对象时才继续代理，叫作懒代理
      return value !== null && typeof value === 'object' ? reactive(value) : value;
    },
    set(obj, key, value, receiver) {
      const oldValue = obj[key];
      const result = Reflect.set(obj, key, value, receiver);
      if (!Object.is(oldValue, value)) trigger(obj, key);
      return result;
    },
  });
  proxyMap.set(target, proxy);
  return proxy;
}

function cleanup(effectFn) {
  effectFn.deps.forEach((dep) => dep.delete(effectFn));
  effectFn.deps.length = 0;
}

function effect(fn, options = {}) {
  const effectFn = () => {
    cleanup(effectFn);
    effectStack.push(effectFn);
    activeEffect = effectFn;
    try {
      return fn();
    } finally {
      effectStack.pop();
      activeEffect = effectStack[effectStack.length - 1] ?? null;
    }
  };
  effectFn.deps = [];
  effectFn.scheduler = options.scheduler;
  if (!options.lazy) effectFn();
  return effectFn;
}

function computed(getter) {
  let value;
  let dirty = true;
  const obj = {};
  const runner = effect(getter, {
    lazy: true,
    scheduler() {
      if (dirty) return;
      dirty = true;
      trigger(obj, 'value'); // 通知读过这个 computed 的 effect
    },
  });
  Object.defineProperty(obj, 'value', {
    get() {
      if (dirty) {
        value = runner();
        dirty = false;
      }
      track(obj, 'value');
      return value;
    },
  });
  return obj;
}

// 1. 基本的依赖收集与触发
const state = reactive({ count: 1, user: { name: 'Lin' }, show: true });
const log = [];
effect(() => log.push(`count=${state.count}`));
state.count = 2;
console.log(log.join(',')); // 输出 count=1,count=2

// 2. 嵌套对象也是响应式的
effect(() => log.push(`name=${state.user.name}`));
state.user.name = 'Chen';
console.log(log.slice(-1)[0]); // 输出 name=Chen

// 3. 分支切换后，不再读的属性不会触发
let branchRuns = 0;
effect(() => {
  branchRuns += 1;
  return state.show ? state.user.name : '隐藏';
});
state.show = false;
state.user.name = 'Wang';
console.log(branchRuns); // 输出 2

// 4. computed 懒计算、有缓存，并能被 effect 依赖
let getterRuns = 0;
const double = computed(() => {
  getterRuns += 1;
  return state.count * 2;
});
console.log(getterRuns); // 输出 0
console.log(double.value, double.value, getterRuns); // 输出 4 4 1
const seen = [];
effect(() => seen.push(double.value));
state.count = 5;
console.log(seen.join(','), getterRuns); // 输出 4,10 2