美文网首页
实现reactive,ref

实现reactive,ref

作者: Aurora_卷 | 来源:发表于2021-05-20 14:44 被阅读0次

vue3通过proxy实现代理,数据响应

let proxyfn = new Proxy(obj,{
 get(obj,key){
 console.log(obj[key])
 return obj[key]
},
set(obj,key,value){
   console.log(obj[key])
   obj[key] = value
   return true
 }
})

reactive函数

function reactive(obj){
 if(typeof obj == 'objecct'){
     if(obj instanceof Array){
       // 如果是数组,取出每一项
       // 判断每一项是否是对象,如果是对象也需要包装成proxy
       obj.forEach((item,index) => {
           if(typeof obj[item] =='object' ){
              obj[index] = reactive(obj[item])
             }
         })
    } else {
     // 对象的每一项是否又是对象
    // 如果每一项也是对象,需要包装成proxy
    for(let key in obj){
      let item = obj[key]
      if(typeof obj[item] =='object' ){
         obj[index] = reactive(obj[item])
      }
    }
   }
  }else{
   console.warn(`message:${obj} is not object`)
   return false
  }
 return new Proxy(obj,{ get(obj,key){ console.log(obj[key]) return obj[key]},set(obj,key,value){   console.log(obj[key])   obj[key] = value   return true }})
 }

相关文章

网友评论

      本文标题:实现reactive,ref

      本文链接:https://www.haomeiwen.com/subject/xttbjltx.html