ES6中的Proxy、Reflect以及Vue3.0中的应用原理

Vue3.0中，Even You表示会使用Proxy代替Object.defineProperty来做数据的响应式。对于Object.defineProperty我们已经很熟悉了，之前也写过相关的Vue双向绑定原理（二）访问器属性defineProperty()和发布/订阅模式。

我们也知道了使用Object.defineProperty的一些劣势：

1. Object.defineProperty监听的是对象的属性，如果对象比较复杂，需要逐个深层遍历他的属性来实现监听，耗费性能
2. Object.defineProperty无法监听数组的变化，使Vue不得不对数组做了额外的hack。

相比之下Proxy就更强大，接下来我们就来了解他。

参考资料：

• MDN-Proxy
• MDN-Reflect
• 面试官: 实现双向绑定Proxy比defineproperty优劣如何?

Proxy简介

Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。使用方法如下：

// 语法
let p = new Proxy(target, handler);
// 用例
let p = {
   a: 1};
let proxyP = new Proxy(p, {
   
	get() {
   
		// 获取proxyP对象属性时的自定义逻辑
	},
	set() {
   
		// 设置proxyP对象属性时的自定义逻辑
	}
})

上边的代码中：

• target：用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
• handler：一个对象，其属性是当执行一个操作时定义代理的行为的函数。
• p/proxyP：是一个被代理后的新对象,它拥有target的一切属性和方法.只不过其行为和结果是在handler中自定义的.

这里重点说一下handler：handler本身就是ES6所新设计的一个对象.它的作用就是用来自定义代理对象的各种可代理操作。它本身一共有13中方法,每种方法都可以代理一种操作，常用的几种方法如下:

// 在定义代理对象某个属性时的属性描述时触发该操作，比如在执行 Object.defineProperty(proxy, "foo", {}) 时。