const data = {
  name:"pingping",
  age:18,
  flag:true
};

const state = new Proxy(data,{
  /*...*/
})

watch(state,()=>{
  console.log("數(shù)據(jù)變化了呀...");
});

//在響應數(shù)據(jù)的age值被修改了，就會導致回調函數(shù)執(zhí)行
state.age++;

//watch 函數(shù)接收source響應數(shù)據(jù)和回調函數(shù)cb
function watch(source, cb){
  effect(
    //觸發(fā)讀取操作，建立聯(lián)系
    ()=>source.age,
    {
      scheduler(){
        // 當數(shù)據(jù)發(fā)生變化，調用回調函數(shù)cb
        cb();
      }
    }
  )
}

function watch(source, cb){
  effect(
    //調用traverse函數(shù)遞歸讀取操作，建立聯(lián)系
    ()=>traverse(source),
    {
      scheduler(){
        // 當數(shù)據(jù)發(fā)生變化，調用回調函數(shù)cb
        cb();
      }
    }
  )
}
const isObject = (value:any) => typeof value === "object" && value !== null;

function traverse(value, seen = new Set()){
  //如果讀取的數(shù)據(jù)是原始值，或已經讀取過響應數(shù)據(jù)，則什么也不做
  if(!isObject(value) || seen.has(value)) return;
  //將數(shù)據(jù)添加到seen中，表示遍歷讀取過數(shù)據(jù)，避免循環(huán)引用導致死循環(huán)
  seen.add(value);
  //對數(shù)據(jù)對象進行遍歷遞歸讀取，用于依賴收集
  for(const k in value){
    traverse(value[k],seen);
  }
  return value;
}

function watch(source,cb){
    let getter;
    if(typeof source === "function"){ // 如果是函數(shù)表示是getter，可以直接賦值
       getter = source;
    }else{
       getter = () => traverse(source)// 包裝成effect對應的effectFn, 函數(shù)內部進行遍歷達到依賴收集的目的
    }
    let oldValue, newValue;
    const effectFn = effect(
      ()=>getter(),
      {
        //開啟lazy選項，將返回值存儲到effectFn中以便于之后手動調用
        lazy: true,
        scheduler(){
          newValue = effectFn(); // 值變化時再次運行effect函數(shù),獲取新值
          cb(newValue,oldValue);
          //更新舊值，不然下次得到的是錯誤的舊值
          oldValue = newValue;
        }
      }
    )
    //手動調用副作用函數(shù)，拿到的值是舊值
    oldValue = effectFn();
}

watch(
  ()=>state.age,
  (newValue, oldValue)=>{
      console.log(newValue, oldValue);
  }
)

state.age++

function watch(source, cb, options={}){
  let getter;
  if(type === "function"){
    getter = source;
  }else{
    getter = ()=>traverse(source);
  }
  
  let oldValue, newValue;
  
  // 提取調度函數(shù)為獨立的函數(shù)
  const scheduler = ()=>{
    newValue = effectFn(); // 值變化時再次運行effect函數(shù),獲取新值
    cb(newValue,oldValue);
    //更新舊值，不然下次得到的是錯誤的舊值
    oldValue = newValue;
  }
  
  const effectFn = effect(
    ()=>getter(),
    {
      //開啟lazy選項，將返回值存儲到effectFn中以便于之后手動調用
      lazy: true,
      scheduler: scheduler
    }
  )
  if(options.immediate){
    //當immediate為true時，立即執(zhí)行scheduler函數(shù)從而觸發(fā)回調執(zhí)行
    scheduler()
  }else{
    //手動調用副作用函數(shù)，拿到的值是舊值
    oldValue = effectFn();
  }
}

function watch(source, cb, options={}){
  let getter;
  if(type === "function"){
    getter = source;
  }else{
    getter = ()=>traverse(source);
  }
  
  let oldValue, newValue;
  
  // 提取調度函數(shù)為獨立的函數(shù)
  const obj = ()=>{
    newValue = effectFn(); // 值變化時再次運行effect函數(shù),獲取新值
    cb(newValue,oldValue);
    //更新舊值，不然下次得到的是錯誤的舊值
    oldValue = newValue;
  }
  
  const effectFn = effect(
    ()=>getter(),
    {
      //開啟lazy選項，將返回值存儲到effectFn中以便于之后手動調用
      lazy: true,
      scheduler(){
        if(options.flush === "post"){
          const p = Promise.resolve();
          p.then(obj);
        }else{
          obj();
        }
      }
    }
  )
  if(options.immediate){
    //當immediate為true時，立即執(zhí)行scheduler函數(shù)從而觸發(fā)回調執(zhí)行
    scheduler()
  }else{
    //手動調用副作用函數(shù)，拿到的值是舊值
    oldValue = effectFn();
  }
}

let finalData;

watch(state, async ()=>{
  //發(fā)送等待網(wǎng)絡請求
  const res = await fetch("/user/info");
  finalData = res;
})

function watch(source, cb, options={}){
  let getter;
  if(type === "function"){
    getter = source;
  }else{
    getter = ()=>traverse(source);
  }
  
  let oldValue, newValue;
  
  let cleanupFn;//用于存儲用戶注冊的過期回調
  //定義onInvalidate函數(shù)
  const onInvalidate = (fn)=>{
    //將過期的回調函數(shù)存儲到cleanupFn中
    fn();
  }
  
  // 提取調度函數(shù)為獨立的函數(shù)
  const obj = ()=>{
    newValue = effectFn(); // 值變化時再次運行effect函數(shù),獲取新值
    
    //在調用回調函數(shù)cb之前，先調用過期的回調函數(shù)
    if(cleanupFn){
      cleanupFn();
    }
    cb(newValue,oldValue,onInvalidate);
    //更新舊值，不然下次得到的是錯誤的舊值
    oldValue = newValue;
  }
  
  const effectFn = effect(
    ()=>getter(),
    {
      //開啟lazy選項，將返回值存儲到effectFn中以便于之后手動調用
      lazy: true,
      scheduler(){
        if(options.flush === "post"){
          const p = Promise.resolve();
          p.then(obj);
        }else{
          obj();
        }
      }
    }
  )
  if(options.immediate){
    //當immediate為true時，立即執(zhí)行scheduler函數(shù)從而觸發(fā)回調執(zhí)行
    scheduler()
  }else{
    //手動調用副作用函數(shù)，拿到的值是舊值
    oldValue = effectFn();
  }
}

watch(state, async (newValue, oldValue, onInvalidate)=>{
  let expired = false;
  onInvalidate(()=>{
    expired = true;
  })
  
  const res = await fetch("/user/info");
  
  if(!expired){
    finaleData = res;
  }
});

//第一次修改
state.age++;
setTimeout(()=>{
  state.age++;
},200)