vue3 双向数据绑定 Proxy

[Turing724]

// 基本用法
const data = {
  name: 'Zoey',
  age: 12
}

const handler = {
  get(target,key,receiver){
    const res = Reflect.get(target,key,receiver)
    console.log('get',key)
    return res
  },
  set(target,key,val,receiver){
    const res = Reflect.set(target,key,val,receiver)
    console.log('set',val,key)
    return res
  },
  deleteProperty(target,key){
    const res = Reflect.deleteProperty(target,key)
    console.log('deleteProperty',key)
    return res
  }
}

const proxyData = new Proxy(data,handler)

proxyData.age // 'get' 'age' 12
proxyData.name = 'Z' // set name Z / Z
proxyData.sex = '0' // set sex 0 / 0
delete proxyData.sex // deleteProperty sex / true

// 数组监听
const arr = [1,2,3,4,5,6]

const handleArr = {
  get(target, key, receiver){
    // 指处理本身属性
    const ownKeys = Reflect.ownKeys(target)
    if(ownKeys.includes(key)){
      console.log('get', key) // 只处理监听
    }
    const res = Reflect.get(target, key, receiver)
    return res
  },
  set(target, key, val, receiver){
    // 重复数据不做处理
    if(val === target[key]){
      return 
    }
    const res =Reflect.set(target, key, val, receiver)
     console.log('set', key, val) // 是否设置成功
    return res 
  },
   deleteProperty(target,key){
    const res = Reflect.deleteProperty(target,key)
    console.log('deleteProperty',key)
    return res
  }
}

const proxyArr = new Proxy (arr, handleArr)
proxyArr.push(7) // get length set 5(指下标) 7