标签：Vue 对象 Object Proxy 数组 defineProperty 属性

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,Proxy,数组,defineProperty,属性
来源： https://www.cnblogs.com/kaicy/p/14655422.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。