``` const person={
name:'张三',
age:20
}
// 模拟Vue2中实现响应式
const p = {}
Object.defineProperty(p,'name',{
configurable:true,//是否该属性能从对象上删除
get(){ // 有人读取name时调用
return person.name
},
set(value){
console.log('有人修改了name属性,我发现了要去更新界面')
person.name=value
}
})
Object.defineProperty(p,'age',{
configurable:true,//是否该属性能从对象上删除
get(){ // 有人读取name时调用
return person.name
},
set(value){// 有人修改age时调用
console.log('有人修改了name属性,我发现了要去更新界面')
person.age=value
}
})
// 模拟Vue3中实现响应式
const p = new Proxy(person,{
// 有人读取p的某个属性时调用
get(target,propNmae){
console.log(`有人读取了p身上的${propNmae}属性`)
return target[propNmae]
},
// 有人修改p的某个属性丶或给p追加某个属性时调用
set(target,propNmae,value){
console.log(`有人修改了p身上的${propNmae}属性,我要去更新界面了!`)
target[propNmae]=value
},
// 有人删除P的某个属性调用
deleteProperty(target,propName){
console.log(`有人删除了p身上的${propNmae}属性,我要去更新界面了!`)
return delete target[propName]
}
})
