js 实现VUE响应式监听数据

Proxy

//data
let state ={
    province:'',
    city:'',
    area:'',
}

//watch方法
let watcher = {
}
for(let key in state){
    watcher[key]=(res)=>{
        watcher[key+'_callback']=res
    }
}


const postParams  = new Proxy(state,{
    //获取值
    get(thisData,key){
        return thisData[key]
    },
    //修改值
    set(thisData,key,newValue){
        thisData[key]=newValue
        //放入watch方法
        if(watcher[key+'_callback'])watcher[key+'_callback'](newValue,thisData[key])
    }
})
watcher.province(res=>{
    console.log(res)
})


postParams.province=1//修改

let state ={
  province:'',
  city:'',
  area:'',
  data:{
    value:99
  }
}

// 设置对象
// valueData监听数据
// watcherValue：监听数据里面存在对象是需要传递watch
// watcherKey：监听数据里面存在对象是需要传递watch的key
// original:最初的数据
function setData(valueData,watcherValue=null,watcherKey=null,original=null){
  let watcher = {
  }
  if(watcherValue){
    watcher=watcherValue
  }
  //watch方法
  for(let key in valueData){
    // 是否对象
    if(valueData[key] instanceof Object){
      if(!original){
        // 最初对象赋值
        original=valueData;
      }
      let  childerObject=null;
      // watcher 是否存在
      if(watcherValue && watcherKey){
        childerObject =setData(valueData[key],watcherValue,watcherKey,original)
      }else{
        childerObject =setData(valueData[key],watcher,key,original)
      }
      childerData=childerObject.postParams
      childerWatcher=childerObject.watcher

      // 当前对象监听

      // 在原数据中加入初始值
      valueData['_'+key+'_original_']=valueData[key]
      // 将当前对象替换成Proxy对象
      valueData[key]=childerObject.postParams
      // 合并watch
      Object.assign(watcher,childerWatcher)
    }else{
      if(watcherValue && watcherKey){
        watcherValue[watcherKey]=(res)=>{
            watcher['_'+watcherKey+'_callback']=res
        }
      }else{
        watcher[key]=(res)=>{
            watcher['_'+key+'_callback']=res
        }
      }
     
    }
  }

  const postParams  = new Proxy(valueData,{
    //获取值
    get(thisData,key){
        return thisData[key]
    },
    //修改值
    set(thisData,key,newValue){
        //放入watch方法
        if(watcherValue && watcherKey){
        // 原数据
          let oddValueObject=Object.assign({},original[`_${watcherKey}_original_`])
          thisData[key]=newValue
          // 修改后的
          let newValueObject=original[`_${watcherKey}_original_`]
          if(watcherValue['_'+watcherKey+'_callback'])watcherValue['_'+watcherKey+'_callback'](newValueObject,oddValueObject)
        }else{
          let oddValue=thisData[key]
          thisData[key]=newValue
          if(watcher['_'+key+'_callback'])watcher['_'+key+'_callback'](newValue,oddValue)
        }
       
    }
  })
  return {
    postParams,watcher
  }
}




//使用
const {postParams,watcher}=setData(state)


watcher.province((newValue,oddValue)=>{
  console.log(newValue,oddValue)
})
watcher.data((newValue,oddValue)=>{
  console.log(newValue,oddValue)
})
setTimeout(()=>{
  postParams.province=9999
  postParams.data.value=9999
  
},1500)

 

 

defineProperty 

//data
const postParams = {
    province:'',
    city:'',
    area:'',
}

//watch方法
let watcher = {
}
 for(let key in postParams){
    let value = postParams[key]
    watcher[key]=(res)=>{
        watcher[key+'_callback']=res
    }
    //监听每一个数据变化
    Object.defineProperty(postParams,key,{
        get(){
           return value
        },
        set(newValue){
            value=newValue
            //放入watch
            if(watcher[key+'_callback'])watcher[key+'_callback'](newValue,value)
        }
    })
 }

watcher.province(res=>{
    console.log(res)
})

postParams.province=1//修改