// 依賴管理器：收集Watcher，觸發(fā)更新
class Dep {
  constructor() {
    this.subs = []; // 存放所有依賴當(dāng)前屬性的Watcher
  }
  // 收集依賴：把當(dāng)前Watcher加入數(shù)組
  depend() {
    if (Dep.target) { // Dep.target 是當(dāng)前活躍的Watcher（比如組件渲染W(wǎng)atcher）
      this.subs.push(Dep.target);
    }
  }
  // 通知所有Watcher更新
  notify() {
    // 遍歷所有依賴的Watcher，執(zhí)行update方法
    this.subs.forEach(watcher => watcher.update());
  }
}
// Dep.target：全局變量，標(biāo)記當(dāng)前正在執(zhí)行的Watcher（渲染/計(jì)算/監(jiān)聽）
Dep.target = null;

class Watcher {
  constructor(vm, expr, callback) {
    this.vm = vm; // Vue實(shí)例
    this.expr = expr; // 監(jiān)聽的屬性（如 'user.name'）
    this.callback = callback; // 更新回調(diào)（比如重新渲染組件）
    this.value = this.get(); // 初始化：訪問屬性，觸發(fā)依賴收集
  }
  // 訪問屬性，觸發(fā)getter，收集依賴
  get() {
    Dep.target = this; // 標(biāo)記當(dāng)前Watcher為活躍狀態(tài)
    const value = this.vm[this.expr]; // 訪問屬性，觸發(fā)getter → dep.depend()
    Dep.target = null; // 重置
    return value;
  }
  // 執(zhí)行更新（由dep.notify()調(diào)用）
  update() {
    const newVal = this.vm[this.expr]; // 獲取新值
    this.callback(newVal); // 執(zhí)行回調(diào)（比如重新渲染組件）
  }
}

function defineReactive(obj, key, val) {
  const dep = new Dep(); // 每個(gè)屬性對(duì)應(yīng)一個(gè)Dep
  observe(val); // 遞歸處理嵌套對(duì)象
  Object.defineProperty(obj, key, {
    get() {
      dep.depend(); // 收集依賴：把當(dāng)前Watcher加入dep.subs
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      observe(newVal); // 新值是對(duì)象則遞歸監(jiān)聽
      dep.notify(); // ?? 關(guān)鍵：屬性修改，通知所有Watcher更新
    }
  });
}

// 模擬Vue實(shí)例
const vm = {
  data: { user: { name: '張三' } }
};
// 把data變成響應(yīng)式
observe(vm.data);
// 創(chuàng)建Watcher：監(jiān)聽user.name，回調(diào)是打印新值（模擬組件渲染）
new Watcher(vm.data, 'user.name', (newVal) => {
  console.log('視圖更新：name變?yōu)?, newVal);
});
// 第一步：訪問屬性 → 觸發(fā)getter → 收集依賴
console.log(vm.data.user.name); // 輸出"張三"，此時(shí)Dep.subs已存入這個(gè)Watcher
// 第二步：修改屬性 → 觸發(fā)setter → dep.notify()
vm.data.user.name = '李四'; 
// ?? dep.notify()執(zhí)行 → 遍歷subs → 調(diào)用Watcher.update() → 打印"視圖更新：name變?yōu)?李四"

new Vue({
  data() {
    return { msg: 'hello' };
  },
  template: `<div>{{ msg }}</div>`
});
// 當(dāng)你修改 msg 時(shí)：
this.msg = 'world'; 
// 觸發(fā) msg 的 setter → dep.notify() → 通知組件渲染W(wǎng)atcher → 組件重新渲染 → 頁面顯示 'world'