// 源数据
let person = {
name: '张三',
age: 18
}
//#region
// 模拟Vue2中实现响应式
// let p = {}
// Object.defineProperties(p, 'name', {
// configurable: true,
// // 有人读取name时调用
// get() {
// return person.name
// },
// // 有人修改name时调用
// set(value) {
// console.log('有人修改了name属性，我发现了，我要去更新界面！');
// person.name = value
// }
// })
// Object.defineProperties(p, 'age', {
// configurable: true,
// // age
// get() {
// return person.age
// },
// // 有人修改name时调用
// set(value) {
// console.log('有人修改了name属性，我发现了，我要去更新界面！');
// person.age = value
// }
// })
//#endregion
//模拟Vue3中实现响应式
// p为person的代理对象
const p = new Proxy(person,{
// 有人读取p的某个属性时调用
get(target,propName){
console.log('有人读取了p身上的'+propName+'属性');
return target[propName]
},
// 有人修改p的某个属性，或给p追加某个属性时调用
set(target,propName,value){
console.log('有人修改了p身上的'+propName+'属性，我要去更新');
target[propName] = value
},
// 有人删除p的某个属性时调用
deleteProperty(target,propName){
console.log('有人删除了p身上的'+propName+'属性，我要去更新');
return delete target[propName]
}
})
