Vue中Object.defineProperty()缺点和Proxy优势

Vue2.X通过Object.defineProperty()来劫持各个属性的setter，getter，新版本通过Proxy劫持属性

Proxy优势

支持数组，其实还不止

Object.defineProperty() 的问题主要有三个：

• 不能监听数组的变化
• 必须遍历对象的每个属性
• 必须深层遍历嵌套的对象

• 1、数据规模是否庞大。创建Vue实例的时候，一旦对象是一个深层的引用（老千层饼了），递归进行Observer的创建显然会花很多时间；

  2、对所有属性的变化进行监听，也需要消耗不小的内存；

  3、新增/删除属性的时候，怎么调用/卸载defineProperty；

  4、vue2的官方文档，对开发者说明了defineProperty的一些限制，比如说数组在两种情况下是无法监听的：

  1、利用索引直接设置一个数组项时，例如：arr[indexOfItem] = newValue;

  2、修改数组的长度时，例如：arr.length = newLength;

   

Proxy 在 ES2015 规范中被正式加入，它有以下几个优势点

• 针对对象：针对整个对象，而不是对象的某个属性，所以也就不需要对 keys 进行遍历。这解决了上述 Object.defineProperty() 第二个问题

• 支持数组：Proxy 不需要对数组的方法进行重载，省去了众多 hack，减少代码量等于减少了维护成本，而且标准的就是最好的。

• Proxy 的第二个参数可以有 13 种拦截方法，这比起 Object.defineProperty() 要更加丰富

• Proxy 作为新标准受到浏览器厂商的重点关注和性能优化，相比之下 Object.defineProperty() 是一个已有的老方法，可以享受新版本红利。

Vue中Object.defineProperty()缺点和Proxy优势

原文：https://www.cnblogs.com/kaicy/p/14655422.html