Vue3 响应式原理深度解析：Proxy 实现与依赖收集逻辑

type EffectFn = (() => any) & { deps?: Set<Set<EffectFn>>; scheduler?: (job: () => void) => void; lazy?: boolean; };

const targetMap = new WeakMap<object, Map<any, Set<EffectFn>>>();
let activeEffect: EffectFn | null = null;
const effectStack: EffectFn[] = [];

const ITERATE_KEY = Symbol('iterate');
const MAP_KEY_ITERATE_KEY = Symbol('map_key_iterate');

function cleanup(effect: EffectFn) {
  if (!effect.deps) return;
  for (const dep of effect.deps) dep.delete(effect);
  effect.deps.clear();
}

export function effect(fn: () => any, options: { scheduler?: (job: () => void) => void; lazy?: boolean } = {}): EffectFn {
  const e: EffectFn = function wrappedEffect() {
    cleanup(e);
    activeEffect = e;
    effectStack.push(e);
    try {
      return fn();
    } finally {
      effectStack.pop();
      activeEffect = effectStack[effectStack.length - 1] || null;
    }
  } as EffectFn;
  e.deps = new Set();
  e.scheduler = options.scheduler;
  e.lazy = !!options.lazy;
  if (!e.lazy) e();
  return e;
}

function track(target: object, key: any) {
  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);
  }
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect);
    activeEffect.deps!.add(dep);
  }
}

function trigger(target: object, key: any, type: 'set' | 'add' | 'delete') {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const effects = new Set<EffectFn>();
  const addEffects = (dep?: Set<EffectFn>) => {
    if (!dep) return;
    for (const e of dep) effects.add(e);
  };
  addEffects(depsMap.get(key));
  if (type === 'add' || type === 'delete') addEffects(depsMap.get(ITERATE_KEY));
  const run = (e: EffectFn) => {
    if (e.scheduler) e.scheduler(() => e());
    else e();
  };
  for (const e of effects) run(e);
}

const reactiveMap = new WeakMap<object, any>();

export function reactive<T extends object>(obj: T): T {
  const existing = reactiveMap.get(obj);
  if (existing) return existing;
  const proxy = new Proxy(obj, {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver);
      track(target, key);
      if (typeof res === 'object' && res !== null) return reactive(res as object) as any;
      return res;
    },
    set(target, key, value, receiver) {
      const hadKey = Object.prototype.hasOwnProperty.call(target, key);
      const oldVal = (target as any)[key];
      const result = Reflect.set(target, key, value, receiver);
      if (!hadKey) trigger(target, key, 'add');
      else if (oldVal !== value) trigger(target, key, 'set');
      return result;
    },
    has(target, key) {
      const res = Reflect.has(target, key);
      track(target, key);
      return res;
    },
    ownKeys(target) {
      track(target, ITERATE_KEY);
      return Reflect.ownKeys(target);
    },
    deleteProperty(target, key) {
      const hadKey = Object.prototype.hasOwnProperty.call(target, key);
      const result = Reflect.deleteProperty(target, key);
      if (hadKey && result) trigger(target, key, 'delete');
      return result;
    }
  });
  reactiveMap.set(obj, proxy);
  return proxy as T;
}

export function ref<T>(raw: T) {
  const r = {
    get value() {
      track(r, 'value');
      return raw;
    },
    set value(v: T) {
      raw = v;
      trigger(r, 'value', 'set');
    }
  };
  return r;
}

export function computed<T>(getter: () => T) {
  let cached: T;
  let dirty = true;
  const runner = effect(() => {
    cached = getter();
  }, { lazy: true, scheduler: job => job() });
  return {
    get value() {
      if (dirty) {
        runner();
        dirty = false;
      }
      track(this, 'value');
      return cached!;
    }
  };
}

// 基本使用
const state = reactive({ count: 0, nested: { a: 1 } });
const doubled = computed(() => state.count * 2);

effect(() => {
  document.querySelector('#app')!.textContent = `count=${state.count}, doubled=${doubled.value}`;
});

setInterval(() => {
  state.count++;
}, 1000);

const queue = new Set<Function>();
let flushing = false;
function queueJob(job: Function) {
  queue.add(job);
  if (!flushing) {
    flushing = true;
    Promise.resolve().then(() => {
      for (const j of queue) j();
      queue.clear();
      flushing = false;
    });
  }
}

const state2 = reactive({ x: 0 });
const e2 = effect(() => {
  console.log(state2.x);
}, { scheduler: queueJob });
state2.x = 1;
state2.x = 2;