Vue3 源码解析：响应式系统、虚拟 DOM、编译优化

📝 简化版响应式系统实现

// 全局变量：当前活跃的 Effect
let activeEffect = null;

// 1. Effect：依赖追踪与触发
class Effect {
  constructor(fn) {
    this.fn = fn;
    this.deps = [];  // 依赖的集合（用于清理）
  }

  run() {
    activeEffect = this;
    const result = this.fn();  // 执行函数，触发 get 拦截
    activeEffect = null;
    return result;
  }
}

// 2. Dep：依赖收集器（每个属性一个 Dep）
class Dep {
  constructor() {
    this.subscribers = new Set();  // 订阅者（Effect）集合
  }

  depend() {
    if (activeEffect) {
      this.subscribers.add(activeEffect);
      activeEffect.deps.push(this);  // 反向引用，用于清理
    }
  }

  notify() {
    this.subscribers.forEach(effect => effect.run());  // 触发更新
  }
}

// 3. Reactive：创建响应式对象（使用 Proxy）
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      const dep = getDep(target, key);  // 获取该属性的 Dep
      dep.depend();  // 收集依赖（如果有活跃 Effect）
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      const dep = getDep(target, key);  // 获取该属性的 Dep
      dep.notify();  // 触发更新
      return result;
    }
  });
}

// 辅助函数：为每个对象的每个属性创建 Dep
const targetMap = new WeakMap();  // obj → Map(key → Dep)
function getDep(target, key) {
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Dep();
    depsMap.set(key, dep);
  }
  return dep;
}

// 4. 测试
const state = reactive({ count: 0 });

// 创建一个 Effect（会自动追踪依赖）
const effect = new Effect(() => {
  console.log(`count is: ${state.count}`);  // 访问 state.count，触发 get
});

effect.run();  // 输出：count is: 0

state.count++;  // 修改 state.count，触发 set → 自动执行 effect.run()
// 输出：count is: 1