什么时候要用到Reflect API？

参考文档
https://www.zhihu.com/question/460133198
https://cn.vuejs.org/guide/extras/reactivity-in-depth.html
https://juejin.cn/post/7103764386220769311

Reflect API 一般搭配 Proxy API 一起使用。什么是 Proxy API 呢？
先回顾下 vue 的数据响应性是如何实现的。

Vue2 用逐个属性 Object.defineProperty()改 get 和 set 方法来实现，对于某些情况数据绑定不生效，要强制刷新。比如直接改变数组下标（defineProperty能监听，但因性能问题放弃。数组部分 api 比如 push 通过重写实现监听）；无法监听属性的增加和删除。层级深时还会有性能问题。

到了 Vue3 改为用 Proxy、 Reflect API 实现。相比defineProperty不需要遍历所有属性要改写 get 和 set 方法，提高效率。

let validator = {
 set: function (obj, prop, value, receiver) {
   return Reflect.set(obj, prop, value, receiver)
 },
};

let person = new Proxy({}, validator);

对于 Vue2 之前的问题也能解决：

无法监听删除属性
无法监听新增属性，直接改变数组下标

看到上面的代码，你会好奇，为啥 set 要用 Reflect.set，不直接object[prop]=value？还要最后的 receiver 参数有什么用？

看文档，receiver 是 this 的指向，如果我们直接object[prop]=value，会有什么问题呢？

const a = {
	firstName:'Z', 
	secondName: 1, 
	get name () {
		return this.firstName+this.secondName
	}
}
const proxy = new Proxy(a, {
	get(obj, prop, receiver) {
		return obj[prop]
	},
	set(obj, prop,value) {
		obj[prop] = value
		return true
	}
})
const b = {
	secondName:2
}
Object.setPrototypeOf(b, proxy);
console.log(b.name) // Z1

const a = {
	firstName:'Z', 
	secondName: 1, 
	get name () {
		return this.firstName+this.secondName
	}
}
const proxy = new Proxy(a, {
	get(obj, prop, receiver) {
		return Reflect.get(obj, prop, receiver)
	},
	set(obj, prop,value ,receiver) {
		return Reflect.set(obj, prop,value, receiver)
	}
})
const b = {
	secondName:2
}
Object.setPrototypeOf(b, proxy);
console.log(b.name) // Z2

文档里说 receiver是调用时 this 的指向，第一个参数 target 是目标对象，在上面的例子里，因为 b 没有 name 属性，所以沿着原型链去找，在 a 找到了，此时 get 方法里，obj 就是 a，recevier 仍是 b，我们按照预期应该是用 b 的 secondName 才对。
同时，b 是没有 firstName 的，看结果最后也从 a 里取到 firstName 的值了。

Reflect API 除了能保证 this 的指向正确，还帮助我们在进行 Proxy 编程时代码更清晰。
这里只是 get 和 set 的例子，可以直接return obj[prop]或者obj[prop]=value，但 Proxy 还有很多其他的 API，如果这些 API都要重新实现一次原本的行为比较麻烦，也不清晰。直接调用 Reflect.xxx这样就方便很多。
在这里插入图片描述