const handler = {
  get(target, key) {
    console.log(`讀取屬性：${key}`);
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    console.log(`修改屬性：${key} -> ${value}`);
    return Reflect.set(target, key, value);
  }
};

const data = { message: "Hello Vue 3" };
const proxyData = new Proxy(data, handler);

console.log(proxyData.message); // 讀取屬性：message
proxyData.message = "Updated"; // 修改屬性：message -> Updated

function reactive(target) {
  if (typeof target !== "object" || target === null) {
    return target;
  }

  return new Proxy(target, {
    get(target, key, receiver) {
      console.log(`訪問屬性：${key}`);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.log(`修改屬性：${key} -> ${value}`);
      return Reflect.set(target, key, value, receiver);
    }
  });
}

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

console.log(state.count); // 訪問屬性：count
state.count++; // 修改屬性：count -> 1

let activeEffect = null; // 當(dāng)前正在執(zhí)行的 effect
const targetMap = new WeakMap(); // 存儲(chǔ)依賴

function effect(fn) {
  activeEffect = fn;
  fn(); // 立即執(zhí)行一次，收集依賴
  activeEffect = null;
}

function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }
    let deps = depsMap.get(key);
    if (!deps) {
      deps = new Set();
      depsMap.set(key, deps);
    }
    deps.add(activeEffect);
  }
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const effects = depsMap.get(key);
  if (effects) {
    effects.forEach(fn => fn()); // 觸發(fā)所有依賴
  }
}

// 結(jié)合 Proxy 創(chuàng)建 Vue 3 響應(yīng)式對(duì)象
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key); // 依賴收集
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key); // 觸發(fā)更新
      return result;
    }
  });
}

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

effect(() => {
  console.log(`count 更新：${state.count}`);
});

state.count++; // 觸發(fā)更新：count 更新：1
state.count = 5; // 觸發(fā)更新：count 更新：5