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. onnxruntime源码解析之C接口简介

    一.C接口 1. 简介 其他语言的接口都是在C接口的基础上,进一步的封装. C的接口头文件为:onnxruntime_c_api.h 头文件内包含了详细的注释和说明. 总体上,除了一些数据结构的定义, ...

  2. Windows Defender锁定UI

    计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows Defender Security Center 看下这个项下的子项有没有被添加值 ...

  3. ABAP 指定字符替换为空格

    上代码 DATA:str1 TYPE string VALUE '小红##爱#six##小绿#666'. *******DATA(str1) = '小红##爱#six##小绿#666'. " ...

  4. 使用Swagger和OpenAPI 3规范定义API接口并集成到SpringBoot

    1. OpenAPI 3 规范介绍及属性定义 参考官方定义:https://swagger.io/specification/ 2. 使用OpenAPI 3规范定义API接口 官方样例参考:https ...

  5. 【ZYNQ学习】ZYNQ简介与Vivado使用

    从本篇文章开始,就来记录一下ZYNQ的学习,本篇博客主要介绍ZYNQ是什么以及在vivado中创建一个ZYNQ工程的过程,其中的知识大部分来自于正点原子的ZYNQ教程,感兴趣的可以去看一下他们家的参考 ...

  6. iOS开发之定时器和tableview滑动阻塞问题

    NSTimer *timer = [[NSTimer alloc]initWithFireDate:[NSDate distantPast] interval:1 target:self select ...

  7. jenkins中的pipline

    Jenkins Pipeline 的核心概念 Pipeline,简而言之,就是一套运行于Jenkins上的工作流框架,将原本独立运行于单个或者多个节点的任务连接起来,实现单个任务难以完成的复杂流程编排 ...

  8. 12种SQL注入报错方式

    1.通过floor报错,注入语句如下: and select 1 from (select count(*),concat(version(),floor(rand(0)*2))x from info ...

  9. 手动实现IOC

    spring官方实现的ioc是通过反射和xml技术实现的,下面我们可以根据这个思路简单实现一下IOC,此处省略构建项目,项目的整体结构如图 第一步,在resources目录下创建beans.xml文件 ...

  10. WinExec("D:\\MY_tool\\APPLICATION\\calc.exe", SW_SHOW);

    1 #pragma comment(lib,"shell32.lib")2 3 4 ShellExecute(NULL, NULL,"calc.exe", NU ...