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. select标签如何实现 每个option传递多个值

    设计项目时 我们有时候会利用 <select>  <option  value="值1" > </option>  </select> ...

  2. 自我察觉 vs 自我意识

    自我察觉,知道并理解自己的意图,能够知晓自己干什么 自我意识,评估并修正自己的意图,能够自主选择干什么

  3. VisualSvn-Server搭建

    一.安装VisualSvn-Server 1.安装向导 2.同意许可 3.选择组件 4.选择版本(选择"标准版本",企业版需要收费) 5.服务器设置 6.安装 7.安装中 8.安装 ...

  4. css背景颜色动态渐变实例

    1.https://www.imooc.com/article/27831 2.https://blog.csdn.net/lolgenius/article/details/70169493 3.h ...

  5. Linux安装两个anaconda

    安装过程 1.安装第一个Anaconda Anaconda的官方安装网址在 https://www.continuum.io/downloads/ 安装命令: bash Anaconda3-4.3.1 ...

  6. ASP.NET Core3.1 中使用MongoDB基本操作

    1.安装驱动包 install-package MongoDB.Driver -version 2.11.7 2.配置文件帮助类 ConfigHelper public static class Co ...

  7. Java基础——for循环、while循环

    package com.zhao.demo; public class Demo04 { //for循环 /*public static void main(String[] args) { for ...

  8. 第三章 mysql 数据库接口程序以及SQL语句操作

    mysql  数据库接口程序以及SQL语句操作 用于管理数据库: 命令接口自带命令 DDL:数据定义语言(create drop ) DCL: 数据控制语言(grant revoke) DML: 数据 ...

  9. 20211306 《Python程序设计》实验三报告

    学号 20211306 <Python程序设计>实验三报告 课程:<Python程序设计> 班级: 2113 姓名: 丁文博 学号:20211306 实验教师:王志强 实验日期 ...

  10. Luogu P3368 【模板】树状数组 2 [区间修改-单点查询]

    P3368 [模板]树状数组 2 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数数加上x 2.求出某一个数的和 输入输出格式 输入格式: 第一行包含两个整数N.M,分别表 ...