vue的响应式

let person = {
  name:'路飞',
  age:18
}

// let p = {}
// Object.defineProperty(p, "name", {
//   get(){      //有人读取name时调用
//     return person.name;
//   },
//   set(value){      //有人修改name时调用
//     console.log("有人修改了name属性")
//     person.name = value
//   }
// });
//
// Object.defineProperty(p, "age", {
//   get(){      //有人读取age时调用
//     return person.age;
//   },
//   set(value){      //有人修改age时调用
//     console.log("有人修改了age属性")
//     person.age = value
//   }
// });
// console.log(p.hello = '你好!')
// console.log(person)
const p = new Proxy(person, {        //创建代理
  // 查
  get(target,propName){
    console.log(`有人读取了p身上的${propName}`)
    return target[propName];
    //反射
    // return Reflect.get(target,propName)
  },
  // 改 增
  set(target, propName, value){
    console.log(`有人修改了p身上的${propName}属性`);
    target[propName] = value;
  },
  // 删
  deleteProperty(target, propName){
    console.log(`有人删除了p身上的${propName}属性`)
    return delete target[propName];
  },
});
p.sex = '男';
console.log('person------------------',person)