浅谈 Proxy 和 Object.defineProperty

首先 我们要先了解一下vue的响应式原理：       

        vue.js采用数据劫持结合发布者订阅者模式，通过Object.defineProperty来劫持data中各个属性的getter和setter，在数据发生变动时，发布消息给订阅者，触发相应的监听回调。

在Vue2.x中，Object.defineProperty()方法会在对象上定义一个新对象，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty(obj,prop,descriptor),里面的三个参数分别是：

        obj:要定义的属性的对象，也就是响应数据源的对象；

        prop:要定义或修改的属性名或Symbol，也就是源数据中要读写的信息；

        descriptor:要定义或修改的属性描述符，也就是相对应的对象方法（包含get和set方法）。

而Vue3.0中，响应式原理主要依靠的是ES6新增的Proxy。

需要在Proxy的实例对象中传入两个参数：【源数据对象，处理对象的方法（get/set/deleteProperty等）】

然后我们再来简单认识一下数据劫持：

        数据劫持指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。

Vue数据劫持有两个缺点：1）无法监听通过索引修改数组值的变化

                                          2）无法监听object也就是对象值的变化

所以Vue2中才会有$set属性的存在，Proxy是es6中新推出的api，可以弥补以上两个缺点，所以Vue3中用Proxy代替Object.defineProperty。

Vue 的响应式原理中 Object.defineProperty 的缺陷：

1.Object.defineProperty 无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；

2.Object.defineProperty 只能劫持对象的属性，从而需要对每个对象、每个属性进行遍历，如果属性值是对象，还需要进行深度遍历。Proxy可以劫持整个对象，并返回一个新对象；

3.Proxy不仅能代理对象、代理数组，还可以代理动态添加的属性。

Proxy 相比于 Object.defineProperty 的优势：

1.数组变化也能监听到；

2.不需要深度遍历监听。