// 模擬computed核心邏輯（Vue3風(fēng)格）
class ComputedRef {
  constructor(getter, ctx) {
    this.getter = getter; // 計(jì)算函數(shù)
    this.ctx = ctx; // 上下文
    this._value = null; // 緩存值
    this._dirty = true; // 臟標(biāo)記：true需重新計(jì)算
  }
  // 訪問(wèn)computed時(shí)觸發(fā)
  get value() {
    if (this._dirty) {
      this._value = this.getter.call(this.ctx); // 執(zhí)行計(jì)算
      this._dirty = false; // 標(biāo)記為清潔
    }
    return this._value; // 復(fù)用緩存
  }
  // 依賴變化時(shí)調(diào)用
  markDirty() {
    this._dirty = true; // 標(biāo)記為臟
  }
}
// 實(shí)際使用
const count = ref(1);
// 計(jì)算屬性：依賴count
const doubleCount = new ComputedRef(() => count.value * 2, this);
console.log(doubleCount.value); // 2（計(jì)算并緩存）
console.log(doubleCount.value); // 2（直接復(fù)用緩存）
count.value = 2; // 觸發(fā)count的setter，調(diào)用doubleCount.markDirty()
console.log(doubleCount.value); // 4（重新計(jì)算）

// 模擬watch核心邏輯（Vue3風(fēng)格）
function watch(source, callback, options = {}) {
  const { immediate = false, deep = false } = options;
  let oldValue;
  // 1. 初始化：獲取初始值
  const getInitialValue = () => {
    // 深度監(jiān)聽(tīng)時(shí)遞歸收集對(duì)象所有屬性依賴
    if (deep && isObject(source.value)) {
      traverse(source.value);
    }
    return source.value;
  };
  // 2. 副作用函數(shù)：數(shù)據(jù)變化時(shí)執(zhí)行
  const effectFn = () => {
    const newValue = source.value;
    callback(newValue, oldValue); // 觸發(fā)回調(diào)
    oldValue = newValue;
  };
  // 3. 立即執(zhí)行（immediate為true時(shí)）
  if (immediate) {
    oldValue = getInitialValue();
    effectFn();
  } else {
    oldValue = getInitialValue();
  }
  // 4. 關(guān)聯(lián)響應(yīng)式數(shù)據(jù)：依賴變化時(shí)觸發(fā)effectFn
  effect(effectFn, { lazy: false });
}
// 實(shí)際使用
const user = reactive({ name: '張三', age: 20 });
// 監(jiān)聽(tīng)user.age，支持深度監(jiān)聽(tīng)
watch(
  () => user.age,
  (newAge, oldAge) => {
    console.log(`年齡從${oldAge}變?yōu)?{newAge}`);
  },
  { immediate: true, deep: false }
);