Vue3响应式

常规操作：

let person = {
  name: "张三",
  age: 18,
  sex: "男",
};

let p = new Proxy(person, {
  get(target, prop) {
    // get { name: '张三', age: 18, sex: '男' } age
    console.log("get", target, prop);
    return target[prop];
  },
  set(target, prop, value) {
    // set { name: '张三', age: 18, sex: '男' } name 李四
    // set { name: '李四', age: 18, sex: '男' } hobby pingpong
    console.log("set", target, prop, value);
    target[prop] = value;
  },
  deleteProperty(target, prop) {
    console.log("delete", target, prop);
    // delete { name: '李四', age: 18, sex: '男', hobby: 'pingpong' } sex
    delete target[prop];
  },
});
p.age;
p.name = "李四";
p.hobby = "pingpong";
delete p.sex;

Reflect反射：

let p = new Proxy(person, {
  get(target, prop) {
    let res = Reflect.get(target, prop);
    //get 18
    console.log("get", res);
  },
  set(target, prop, value) {
    let res = Reflect.set(target, prop, value);
    //set true
    //set true
    console.log("set", res);
  },
  deleteProperty(target, prop) {
    let res = Reflect.deleteProperty(target, prop);
    //delete true
    console.log("delete", res);
  },
});

p.age;
(p.name = "哈哈"), (p.hobby = "basketball");
delete p.sex;
//{ name: '哈哈', age: 18, hobby: 'basketball' }
console.log(p);

用Reflect好处在于见名知意，便于阅读理解。其次，Reflect.set/delete返回值为Boolean值，可以知道此次操作是否成功。Vue3响应式就是基于Reflect来实现的