为什么vue3要选用proxy，好处是什么？

提问

1. Object.defineProperty()和proxy的区别？
2. 为什么vue3要选用proxy，好处是什么？

proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

Proxy的用法，这个大家都知道

const p = new Proxy(target, handler)

剖析一下内部实现 ECMAScript 2017 (ECMA-262)

可以看到接收两个参数（target，handler）

1. 如果target是undefined，报错
2. 运行ProxyCreate(target, handler)

下面是ProxyCreate的实现

排除一下错误处理，核心代码从5开始
先创建一个新的空对象p，

设置p对象的内部方法（除了[call]]和[[Construct]]）设置为[9.5指定的定义，

然后设置p的call和Construct方法，

再设置内部属性[[ProxyTarget]]和[[ProxyHandler]]

返回对象p

我们可以用它们拦截什么？

对于对象的大多数操作，JavaScript 规范中有一个所谓的“内部方法”，它描述了最底层的工作方式。例如 [[Get]]，用于读取属性的内部方法，[[Set]]，用于写入属性的内部方法，等等。这些方法仅在规范中使用，我们不能直接通过方法名调用它们。

Proxy 捕捉器会拦截这些方法的调用。它们在 proxy 规范 和下表中被列出。

对于每个内部方法，此表中都有一个捕捉器：可用于添加到 new Proxy 的 handler 参数中以拦截操作的方法名称：

对于对象的大多数操作，JavaScript 规范中有一个所谓的“内部方法”，它描述了最底层的工作方式。例如 [[Get]]，用于读取属性的内部方法，[[Set]]，用于写入属性的内部方法，等等。这些方法仅在规范中使用，我们不能直接通过方法名调用它们。

Proxy 捕捉器会拦截这些方法的调用。它们在 proxy 规范 和下表中被列出。

对于每个内部方法，此表中都有一个捕捉器：可用于添加到 new Proxy 的 handler 参数中以拦截操作的方法名称：

内部方法	Handler 方法	何时触发
[[Get]]	get	读取属性
[[Set]]	set	写入属性
[[HasProperty]]	has	in 操作符
[[Delete]]	deleteProperty	delete 操作符
[[Call]]	apply	函数调用
<