vue2
vue3
<script>
const person = {
name:'lin',
age:18,
}
// Proxy (target,object) 第一个参数是原对象(代理对象), 第二个参数Proxy里面的方法 get set deleteProperty
// Reflect 反射对象
const p = new Proxy(person,{
//获取
get(target,prop){
// target=>代理对象 prop=>读取的属性
console.log(target,prop,`有人读取p里面的${prop}数据`);
return Reflect.get(target,prop)
},
//修改 新增
set(target,prop,value){
// target=>代理对象 prop=>修改的属性 value=>修改后的值
console.log(target,prop,value,`有人修改p里面的${prop}数据, 我需要去更新界面`);
Reflect.set(target,prop,value)
},
// 删除
deleteProperty(target,prop){
// target=>代理对象 prop=>删除的属性
console.log(target,prop,`有人删除p里面的${prop}数据, 我需要去更新界面`);
return Reflect.deleteProperty(target,prop)
}
})
</script>