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. VS2019+ Intel Fortran (oneAPI)+HDF5库的安装+测试

    最近需要读取hdf5文件(*.h5),处于对速度的追求,兼具VS调试程序的需要,使用Fortran+HDF5进行读写. 注意: 此处为动态库连接方式,静态库类似,差异主要为头文件有所差异. 参考网址: ...

  2. VS Code 快速下载

    最近在官网下载Visual Studio Code时,下载速度特别慢,经过搜索后发现,将下载地址前部分更换为国内地址后,下载速度飞快. 具体步骤如下: VSCodeSetup-x64-1.72.0 官 ...

  3. 新建zabbix数据库

    1.安装mysqldnf install -y @mysqlsystemctl start mysqld.servicesystemctl enable mysqld.service初始化mysqlm ...

  4. RPS网卡多队列

    一体机上传1G文件导致服务器很卡,怀疑是网卡未开启多核多队列导致. 脚本如下 #!/bin/bash # Enable RPS (Receive Packet Steering) read -p &q ...

  5. Google在线深度学习神器Colab——科研角色

    转载:Google在线深度学习神器Colab - 简书 (jianshu.com) 转载:不FQ,免费使用带GPU和TPU的深度学习开发环境_colab (sohu.com)

  6. axios与ajax的优缺点

    axios和ajax的区别是什么?        1.axios是一个基于Promise的HTTP库,而ajax是对原生XHR的封装:         2.ajax技术实现了局部数据的刷新,而axio ...

  7. AD中添加原理图文档模板-转载

    (24条消息) AD中添加原理图文档模板_shuguang552的博客-CSDN博客_ad原理图模板

  8. vue-cli打包后运行报路径错误 不知道什么牛马问题 连默认生成的项目不动一行代码直接打包都会出错

    不知道什么牛马问题 连默认生成的项目不动一行代码直接打包都会出错 解决方法 新建一个 vue.config.js module.exports = { publicPath: './', config ...

  9. windows U盘启动装机工具（Ventoy）

    Windows优盘启动装机工具 一.WePE 纯净 WePE 启动盘/ U盘重装系统工具 1.U盘重装系统工具下载地址:https://www.wepe.com.cn/download.html?td ...

  10. etcd 基于ubuntu 20.04 部署集群

    Etcd是Kubernetes集群中的一个十分重要的组件,用于保存集群所有的网络配置和对象的状态信息,K8S中所有持久化的状态信息都是以Key-Value的形式存储在etcd中,提供分布式协调服务.之 ...