Vue3 Proxy Reflect

为什么 Vue3 中 Proxy 的 get 中使用的是 Reflect 获取属性值呢？

来看一段代码：

const target = {
  name: "yang",
  get alias() {
    console.log("this", this); // 打印的是 target
    return this.name;
  },
};

const proxy = new Proxy(target, {
  get(target, key, receiver) {
    console.log("key", key); // 打印的是 alias
    return target[key];
  },
  set(target, key, value, receiver) {
    target[key] = value;
  },
});

proxy.alias

// 打印结果：
// key alias
// this { name: 'yang', alias: [Getter] }

当这个 target 是一个特殊对象时（设置了访问器属性 alias 时），如果通过普通的 target[key] 获取对象值，只会读取 alias 属性。不过读取 name 属性。而
Vue3的 reactivity 机制就是要对这种有访问器属性的字段做处理，进行属性劫持。所以使用了 Reflect，下面看看 Reflect

const target = {
  name: "yang",
  get alias() {
    console.log("this", this);
    return this.name;
  },
};

const proxy = new Proxy(target, {
  get(target, key, receiver) {
    console.log("key", key);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    Reflect.set(target, key, value, receiver);
  },
});

proxy.alias;

// 打印结果：
// key alias
// this { name: 'yang', alias: [Getter] }
// key name

Reflect 就可以对存在访问器属性的对象进行友好的访问，能够在 get 中劫持到 name 属性的访问。