Vue3.x响应式数据原理

Vue3.x改用Proxy替代Object.defineProperty。

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

2、Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？

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

   b、监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为 
        当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件 
        之一时，才有可能执行trigger。

Proxy 与 Object.defineProperty 优劣对比

Proxy 的优势如下:

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

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

Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 
Object.defineProperty 不具备的；
Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历 
对象属性直接修改；
Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty 的优势如下:

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