proxy知识点分享

Proxy是ES2015新增的特性,其内置的捕捉器可以很好的监听到对象的各种变化,比原先的Object.defineProperty可以监听到更多的对象变化,并且写起来也更加方便,所以vue3采用了新的proxy特性来实现数据的双向绑定
下面演示3种基本的对象操作以及其对应的proxy的捕捉器的简单代码

const person={
	name:'tom',
  age:20
}
const proxy=new Proxy(person,{
  get(target,property){
    console.log(target,property);
    return property in target?target[property]:undefined
  },
  set(target,property,value){
    console.log(target,property,value);
    target[property]=value
  }
  deleteProperty(target,property){
    console.log(target,property);
    delete target[property]
  }
})
console.log(proxy.name);//读取过程会自动执行get方法
proxy.gender='male'//赋值操作会自动执行set方法
delete proxy.name//删除属性会自动执行deleteProperty方法

更多内容的话,可阅读
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy