Object.definedProperty和Proxy经常用来实现对象的劫持

  1. Object.definedProperty是vue2.x拦截对象属性变化的方法，再结合订阅-发布者模式和观察者模式实现对象属性的双向绑定更新
  2. Proxy是vue3.0以后改进的双向绑定方案

Object.definedProperty

存在以下缺陷：

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

无法监听数组变化：vue无法对数组的变异方法（push、pop、shift、unshift、splice、sort、reserve）进行监听，只是对这些方法进行重载hack，达到监听变化的效果，这些重载需要一定的开销

必须遍历对象属性：vue对对象进行监听变化，需要使用Object.keys()搭配Object.definedProperty对对象的每个属性进行绑定，加大了开销

必须生成遍历对象: 针对多层嵌套的对象，则需要递归遍历进行绑定

Proxy

Proxy相对Object.definedProperty有以下优点:

  • Porxy监听的是整个对象而不是对象的某个属性
  • Proxy可以监听数组的变化
  • Proxy有多大13中的拦截方式，比Object.definedProperty功能更强大
  • Proxy结果返回的是一个新的对象，我们直接操作新的对象，而不是像Object.definedProperty遍历属性进行修改
  • Proxy有着更好的性能，浏览器厂商也在不对地进行维护和加强

但Proxy也着缺陷：

Proxy的对浏览器的兼容性不够，现阶段无法用polyfill进行兼容，这也是现在不推荐使用vue3.0进行重要项目开发的原因之一，需要等待后期功能的完善

Object.definedProperty和Proxy的对比的更多相关文章

  1. Object.defineProperties()与Proxy对象代理

    Object.defineProperties() 了不起啊..vue.js通过它实现双向绑定的 Object.defineProperties(obj,props) 方法直接在一个对象上定义新的属性 ...

  2. Object.defineProperty和proxy

    Object.defineProperty问题 Object.defineProperty() 无法监控到数组下标的变化.vue只能通过以下几种方法来监听 pop() shift() unshift( ...

  3. 从Object.definedProperty中看vue的双向数据的绑定

    前言 Object.defineProperty是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.vue.js正式利用这种方法实现数据的双向绑定,以 ...

  4. vue2.x版本中Object.defineProperty对象属性监听和关联

    前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ...

  5. 【面试篇】寒冬求职季之你必须要懂的原生JS(中)

    互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...

  6. 双向绑定Proxy VS Object.defineProperty

    Vue3.0的双向绑定将使用Proxy代替Object.defineProperty,据尤大说,速度提升了1倍. 本文我们来探讨一下Proxy对比Object.defineProperty究竟有哪些优 ...

  7. est6 -- Object.is()、Object.assign()、Object.defineProperty()、Symbol、Proxy

    Object.is()用来比较两个值是否严格相等.它与严格比较运算符(===)的行为基本一致,不同之处只有两个:一是+0不等于-0,二是NaN等于自身. + === - //true NaN === ...

  8. 动态代理方案性能对比 (CGLIB,ASSIT,JDK)

    动态代理工具比较成熟的产品有: JDK自带的,ASM,CGLIB(基于ASM包装),JAVAASSIST, 使用的版本分别为: JDK-1.6.0_18-b07, ASM-3.3, CGLIB-2.2 ...

  9. Vue3都使用Proxy了，你更应该了解Proxy

    vue3.0的pre-alpha版代码已经开源了,就像作者之前放出的消息一样,其数据响应这一部分已经由ES6的Proxy来代替Object.defineProperty实现,感兴趣的同学可以看其实现源 ...

  10. 实现双向绑定Proxy比defineproperty优劣如何?

    前言 双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素之一. Vue三要素 响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向绑定 ...

随机推荐

  1. UML各种图实践题

    1. 用状态图描述一部电梯的运行

  2. 记录一次vue的报错

    1.主要代码 <div class="hello-ezuikit-js" v-for="(item,index) in list"> <div ...

  3. https代理服务器（四）java动态签发【失败】

    https://zhuanlan.zhihu.com/p/355241710?utm_id=0 http://t.zoukankan.com/xiaxj-p-8961131.html https:// ...

  4. linux 安装ssl 失败原因

    配置文件成功的情况下打不开:开放端口 设置端口 server { listen 443 default ssl; //需要加不然会显示404 default ssl server_name 域名; s ...

  5. 接入B站iframe视频(bilibili引用视频)

    感谢 https://blog.csdn.net/xinshou_caizhu/article/details/94028606 我们在查看其它资料的时候,视频总加载失败,后来发现是少了 https: ...

  6. java 动手动脑 方法重载

    如下代码://MethodOverload.java //Using overloaded methods package HJssss; public class zhuce { public st ...

  7. drf从入门到飞升仙界 04

    序列化类常用字段和字段参数 常用字段类 #1 BooleanField BooleanField() #2 NullBooleanField NullBooleanField() #3 CharFie ...

  8. SQL SERVER 多表联合修改

    sql server中有时候会用到多表联合修改,下面是简单的多表修改的例子 UPDATE a SET a.a1 = b.b1 , a.a2 = b.b2 FROM A a, B b WHERE a.a ...

  9. Java基础之注释

    注释 在Java的编写过程中我们需要对一些程序进行注释,除了自己方便阅读,更为别人更好理解自己的程序,可以是编程思路或者是程序的作用. 注释不会被执行,是给写代码的人看的. 书写注释是一个非常好的习惯 ...

  10. 在MyBatis-Plus整合dynamic-datasource @DS失效

    因为是事务导致的 解决方案: 1.删除事务 2.使用分布式事务 3.修改事务的传播机制 3.使用DS的本地事务 @DSTransactional 但切记不可和Spring的事务共存 附传播机制 事务传 ...