vue3手写api之reactive、readonly、ref

您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~

学习完vue3当然要尝试手写一下内置的一些api来提高自己的熟练度和理解能力了，写的api可能没有源码层层兼顾，但是核心功能算是完成了，具体如下：

首先~~通用测试obj：

var obj = {
  name:'123',
  age:20,
  hobby:{
    name:'运动'
  }
}

reactive

function reactive(obj){
    if(!obj || typeof obj !== 'object'){
      return
    }
    var proxy = new Proxy(obj,{
    get(target,key,value){
      console.log('获取了')
      return Reflect.get(target,key,value)
    },
    set(target,key,value,newVal){
      console.log('修改了')
      return Reflect.set(target,key,value,newVal)
    },
    deleteProperty(target,key,value){
      console.log('删除了')
      return Reflect.deleteProperty(target,key,value)
    }
  })
  return proxy
}
var newObj = reactive(obj)	//绑定响应式后的代理对象

readonly

function readonly(obj){
  if(!obj || typeof obj !== 'object'){
    return obj
  }
  if(Array.isArray(obj)){
    obj.forEach((item,index)=>{
      obj[index] = readonly(item)
    })
  }else{
    for(var key in obj){
      obj[key] = readonly(obj[key])
    }
  }
  return new Proxy(obj,{
    get(target,key,value){
      console.log('获取了')
      return Reflect.get(target,key,value)
    },
    set(){
      console.log('只读，无法修改')
      return
    },
    deleteProperty(){
      console.log('只读，无法删除')
      return
    }
  })
}

var newObj = readonly(obj)		//只支持get的代理对象

ref

function ref(obj){
  this.ref = obj
  function value(val){
    this.ref = val
    console.log('value触发，响应式赋值')
  }
  function get(){
    console.log('get触发')
  }
  return {
    ref:obj,
    value,
    get
  }
}

var a = ref(123);			//ref响应
a.value(456)

不断学习中，有问题麻烦帮忙指出，感谢！