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

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

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

//在響應(yīng)數(shù)據(jù)的age值被修改了，就會(huì)導(dǎo)致回調(diào)函數(shù)執(zhí)行
state.age++;

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

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

function traverse(value, seen = new Set()){
  //如果讀取的數(shù)據(jù)是原始值，或已經(jīng)讀取過(guò)響應(yīng)數(shù)據(jù)，則什么也不做
  if(!isObject(value) || seen.has(value)) return;
  //將數(shù)據(jù)添加到seen中，表示遍歷讀取過(guò)數(shù)據(jù)，避免循環(huán)引用導(dǎo)致死循環(huán)
  seen.add(value);
  //對(duì)數(shù)據(jù)對(duì)象進(jìn)行遍歷遞歸讀取，用于依賴(lài)收集
  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對(duì)應(yīng)的effectFn, 函數(shù)內(nèi)部進(jìn)行遍歷達(dá)到依賴(lài)收集的目的
    }
    let oldValue, newValue;
    const effectFn = effect(
      ()=>getter(),
      {
        //開(kāi)啟lazy選項(xiàng)，將返回值存儲(chǔ)到effectFn中以便于之后手動(dòng)調(diào)用
        lazy: true,
        scheduler(){
          newValue = effectFn(); // 值變化時(shí)再次運(yùn)行effect函數(shù),獲取新值
          cb(newValue,oldValue);
          //更新舊值，不然下次得到的是錯(cuò)誤的舊值
          oldValue = newValue;
        }
      }
    )
    //手動(dòng)調(diào)用副作用函數(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;
  
  // 提取調(diào)度函數(shù)為獨(dú)立的函數(shù)
  const scheduler = ()=>{
    newValue = effectFn(); // 值變化時(shí)再次運(yùn)行effect函數(shù),獲取新值
    cb(newValue,oldValue);
    //更新舊值，不然下次得到的是錯(cuò)誤的舊值
    oldValue = newValue;
  }
  
  const effectFn = effect(
    ()=>getter(),
    {
      //開(kāi)啟lazy選項(xiàng)，將返回值存儲(chǔ)到effectFn中以便于之后手動(dòng)調(diào)用
      lazy: true,
      scheduler: scheduler
    }
  )
  if(options.immediate){
    //當(dāng)immediate為true時(shí)，立即執(zhí)行scheduler函數(shù)從而觸發(fā)回調(diào)執(zhí)行
    scheduler()
  }else{
    //手動(dòng)調(diào)用副作用函數(shù)，拿到的值是舊值
    oldValue = effectFn();
  }
}

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

let finalData;

watch(state, async ()=>{
  //發(fā)送等待網(wǎng)絡(luò)請(qǐ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;//用于存儲(chǔ)用戶(hù)注冊(cè)的過(guò)期回調(diào)
  //定義onInvalidate函數(shù)
  const onInvalidate = (fn)=>{
    //將過(guò)期的回調(diào)函數(shù)存儲(chǔ)到cleanupFn中
    fn();
  }
  
  // 提取調(diào)度函數(shù)為獨(dú)立的函數(shù)
  const obj = ()=>{
    newValue = effectFn(); // 值變化時(shí)再次運(yùn)行effect函數(shù),獲取新值
    
    //在調(diào)用回調(diào)函數(shù)cb之前，先調(diào)用過(guò)期的回調(diào)函數(shù)
    if(cleanupFn){
      cleanupFn();
    }
    cb(newValue,oldValue,onInvalidate);
    //更新舊值，不然下次得到的是錯(cuò)誤的舊值
    oldValue = newValue;
  }
  
  const effectFn = effect(
    ()=>getter(),
    {
      //開(kāi)啟lazy選項(xiàng)，將返回值存儲(chǔ)到effectFn中以便于之后手動(dòng)調(diào)用
      lazy: true,
      scheduler(){
        if(options.flush === "post"){
          const p = Promise.resolve();
          p.then(obj);
        }else{
          obj();
        }
      }
    }
  )
  if(options.immediate){
    //當(dāng)immediate為true時(shí)，立即執(zhí)行scheduler函數(shù)從而觸發(fā)回調(diào)執(zhí)行
    scheduler()
  }else{
    //手動(dòng)調(diào)用副作用函數(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)