[记录04] vue3 响应式原理Proxy

回顾vue2响应式实现原理

let person = {
  name = '张三'
  age = 18 
}
// vue2实现响应式
let p ={}
Object.defineProperty(p, 'name', {
  get(){
    //有人读取name时调用
    return person.name
  },
  set(value){
    //
    console.log('修改了name, 发现了, 更新页面')
    person.name = value
  }
})

上述代码仅实现了对name的响应式, 如想对所有数据实现响应式, 可以用Object.keys对所有声明的数据进行遍历; 不过存在一些问题

delete person.name  //报错
person.gender = 'male'  //setter监测不到

手动实现vue3的响应式原理

let person = {
  name = '张三'
  age = 18 
}
const p = new Proxy(person,{
  get(target, propName){
    console.log(`读取了p身上的${propName}`)
    return target[propName]
  },
  set(target, propName, value){
    console.log(`修改了或新增了p身上的${propName}`)
    target[propName] = value
  },
  deleteProperty(target, propName){
    // 监测删除
    // delete target[propName]
    return  delete target[propName]
  },
})