Proxy和Object.defineProperty的优缺点

Proxy的优点如下:

1. Proxy可以直接监听对象而非属性；

2. Proxy可以直接监听数组的变化；

3. Pxory有多种（13种）拦截方法，不限于apply、ownKeys、deleteProperty、has等等 是Object.defineProperty不具备的；

4. Proxy返回的是一个新对象，我们可以只操作新的对象达到目的，而Object.defineProperty只能遍历对象属性直接修改；

5. Proxy作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty的优点如下：

兼容性好，支持 IE9，而Proxy 的存在浏览器兼容性问题，而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

Vue3.x响应式数据原理

Vue3改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

  1  Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？

判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。

  2   监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？

可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。