Vue.js实现watch属性的示例详解

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

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

watch(state,()=>{
  console.log("数据变化了呀...");
});

//在响应数据的age值被修改了，就会导致回调函数执行
state.age++;

//watch 函数接收source响应数据和回调函数cb
function watch(source, cb){
  effect(
    //触发读取操作，建立联系
    ()=>source.age,
    {
      scheduler(){
        // 当数据发生变化，调用回调函数cb
        cb();
      }
    }
  )
}

function watch(source, cb){
  effect(
    //调用traverse函数递归读取操作，建立联系
    ()=>traverse(source),
    {
      scheduler(){
        // 当数据发生变化，调用回调函数cb
        cb();
      }
    }
  )
}
const isObject = (value:any) => typeof value === "object" && value !== null;

function traverse(value, seen = new Set()){
  //如果读取的数据是原始值，或已经读取过响应数据，则什么也不做
  if(!isObject(value) || seen.has(value)) return;
  //将数据添加到seen中，表示遍历读取过数据，避免循环引用导致死循环
  seen.add(value);
  //对数据对象进行遍历递归读取，用于依赖收集
  for(const k in value){
    traverse(value[k],seen);
  }
  return value;
}

function watch(source,cb){
    let getter;
    if(typeof source === "function"){ // 如果是函数表示是getter，可以直接赋值
       getter = source;
    }else{
       getter = () => traverse(source)// 包装成effect对应的effectFn, 函数内部进行遍历达到依赖收集的目的
    }
    let oldValue, newValue;
    const effectFn = effect(
      ()=>getter(),
      {
        //开启lazy选项，将返回值存储到effectFn中以便于之后手动调用
        lazy: true,
        scheduler(){
          newValue = effectFn(); // 值变化时再次运行effect函数,获取新值
          cb(newValue,oldValue);
          //更新旧值，不然下次得到的是错误的旧值
          oldValue = newValue;
        }
      }
    )
    //手动调用副作用函数，拿到的值是旧值
    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;
  
  // 提取调度函数为独立的函数
  const scheduler = ()=>{
    newValue = effectFn(); // 值变化时再次运行effect函数,获取新值
    cb(newValue,oldValue);
    //更新旧值，不然下次得到的是错误的旧值
    oldValue = newValue;
  }
  
  const effectFn = effect(
    ()=>getter(),
    {
      //开启lazy选项，将返回值存储到effectFn中以便于之后手动调用
      lazy: true,
      scheduler: scheduler
    }
  )
  if(options.immediate){
    //当immediate为true时，立即执行scheduler函数从而触发回调执行
    scheduler()
  }else{
    //手动调用副作用函数，拿到的值是旧值
    oldValue = effectFn();
  }
}

function watch(source, cb, options={}){
  let getter;
  if(type === "function"){
    getter = source;
  }else{
    getter = ()=>traverse(source);
  }
  
  let oldValue, newValue;
  
  // 提取调度函数为独立的函数
  const obj = ()=>{
    newValue = effectFn(); // 值变化时再次运行effect函数,获取新值
    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时，立即执行scheduler函数从而触发回调执行
    scheduler()
  }else{
    //手动调用副作用函数，拿到的值是旧值
    oldValue = effectFn();
  }
}

let finalData;

watch(state, async ()=>{
  //发送等待网络请求
  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函数
  const onInvalidate = (fn)=>{
    //将过期的回调函数存储到cleanupFn中
    fn();
  }
  
  // 提取调度函数为独立的函数
  const obj = ()=>{
    newValue = effectFn(); // 值变化时再次运行effect函数,获取新值
    
    //在调用回调函数cb之前，先调用过期的回调函数
    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时，立即执行scheduler函数从而触发回调执行
    scheduler()
  }else{
    //手动调用副作用函数，拿到的值是旧值
    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)