Vue 3.0 里为什么要用 Proxy API 替代 defineProperty API？

Vue 3.0 里为什么要用 Proxy API 替代 defineProperty API？

Vue 3.0 里为什么要用 Proxy API 替代 defineProperty API？

一：defineProperty API的弊端

1） vue2是通过Object.defineproperty中的getter和setter函数进行数据劫持完成数据响应的

2）无法直接监听属性的新增和删除

3）无法直接监听数组（尽管通过hack重写了数组，但也仅能完成7个数组的监听）

---

二：Proxy的优势

1）作为vue3中替代defineProperty 的新API，相当于给一个对象的外层加了一层拦截，这层拦截可以做很多操作，比如对数据信息的【过滤】【修改】或者【收集数据信息】

2）因为是在整个对象外层进行了拦截，所以，可以操作对象中的属性同时监听属性的【新增】和【删除】

3）Proxy可以监听数组的变化

---

三：Proxy使用场景

1）数据响应：在实际数据读取和设置前进行拦截，在拦截trap中完成对数据的依赖收集以及触发视图更新操作

2）实现数组的负数索引访问

3）获取属性对应的值，在该值无返回值或为undefined的情况下

---

四：Proxy的劣势

1）兼容性差，在vue3中的新API有一定的劣势，那么重点就是对浏览器不能完全兼容，对部分浏览器的低版本是不兼容的，对qq浏览器，IE浏览器，百度浏览器是完全不兼容的

2）性能问题，Proxy的性能要比promise的性能还要差

---

五：注意： 在使用Proxy的时候，需要根据它的性能和实用性权衡之后，在进行使用