1. Object.defineProperty只能劫持对象的属性,从而需要对每个对象,每个属性进行遍历,如果,属性值是对象,还需要深度遍历。Proxy可以劫持整个对象,并返回一个新的对象。
  2. Proxy不仅可以代理对象,还可以代理数组。还可以代理动态增加的属性。

Object.defineProperty本身有一定的监控到数组下标变化的能力:
Object.defineProperty本身是可以监控到数组下标的变化的,但是在 Vue 中,从性能/体验的性价比考虑,尤大大就弃用了这个特性。具体我们可以参考 《记一次思否问答的问题思考:Vue为什么不能检测数组变动》这篇文章,文章底部配图中有尤大大的严肃回复截图; 下方的讨论区也很值得大家下去看一看,有对于 for / forEach / for .. in .. 几个循环方式的讨论。

关于 Vue 3.0 的其他信息我们可以参考 尤大大发布的 Vue 3.0 新特性预览PPT

另外补充一些其他资料给大家:

Vue 的响应式原理中 Object.defineProperty 有什么缺陷?的更多相关文章

  1. Vue 的响应式原理中 Object.defineProperty 有什么缺陷?为什么在 Vue3.0 采用了 Proxy,抛弃了 Object.defineProperty?

    Object.defineProperty无法监控到数组下标的变化,导致通过数组下标添加元素,不能实时响应: Object.defineProperty只能劫持对象的属性,从而需要对每个对象,每个属性 ...

  2. vue深入响应式原理

    vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...

  3. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  4. Vue 数据响应式原理

    Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...

  5. 深入解析vue.js响应式原理与实现

    vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...

  6. Vue的响应式原理

    Vue的响应式原理 一.响应式的底层实现 1.Vue与MVVM Vue是一个 MVVM框架,其各层的对应关系如下 View层:在Vue中是绑定dom对象的HTML ViewModel层:在Vue中是实 ...

  7. vue系列---响应式原理实现及Observer源码解析(一)

    _ 阅读目录 一. 什么是响应式? 二:如何侦测数据的变化? 2.1 Object.defineProperty() 侦测对象属性值变化 2.2 如何侦测数组的索引值的变化 2.3 如何监听数组内容的 ...

  8. Vue的响应式系统

    Vue的响应式系统 我们第一次使用Vue的时候,会感觉有些神奇,举个例子: <div id="app"> <div>价格:¥{{price}}</di ...

  9. 一探 Vue 数据响应式原理

    一探 Vue 数据响应式原理 本文写于 2020 年 8 月 5 日 相信在很多新人第一次使用 Vue 这种框架的时候,就会被其修改数据便自动更新视图的操作所震撼. Vue 的文档中也这么写道: Vu ...

随机推荐

  1. Yii2.0ActiveRecord嵌套子查询(AR子查询)

    yii2.0的ActiveRecord是可以嵌套子查询的. 比如从一个子查询里面筛选数据. 首先实例化出来一个Query对象,代表子查询. $subQuery = new \yii\db\Query( ...

  2. 开发小白可以一年涨薪10w?这份java文档功不可没,学透你也可以

    靠这份文档,跳槽涨薪10K 金九银十的时候我分享了一份面试文档给我的兄弟,没想到这哥们2个月之内斩获数个BAT的offer, 最后选择了一个他最想要去的公司,既然有这么好的效果,我就打算把这份文档分享 ...

  3. 安装并配置Samba

    1. 安装 samba ~$sudo apt-get install samba 2. 修改 samba 的配置文件 ~$sudo gedit /etc/samba/smb.conf 添加如下内容 [ ...

  4. 曹工说Redis源码(8)--面试时,redis 内存淘汰总被问,但是总答不好

    文章导航 Redis源码系列的初衷,是帮助我们更好地理解Redis,更懂Redis,而怎么才能懂,光看是不够的,建议跟着下面的这一篇,把环境搭建起来,后续可以自己阅读源码,或者跟着我这边一起阅读.由于 ...

  5. 消息队列——RabbitMQ的基本使用及高级特性

    文章目录 一.引言 二.基本使用 1. 简单示例 2. work queue和公平消费消息 3. 交换机 三.高级特性 1. 消息过期 2. 死信队列 3. 延迟队列 4. 优先级队列 5. 流量控制 ...

  6. 【Laravel】 常用的artisan命令

    全局篇 查看artisan命令php artisanphp artisan list 查看某个帮助命令php artisan help make:model 查看laravel版本php artisa ...

  7. 面试问Redis集群,被虐的不行了......

    哨兵主要针对单节点故障无法自动恢复的解决方案,集群主要针对单节点容量.并发问题.线性可扩展性的解决方案.本文使用官方提供的redis cluster.文末有你们想要的设置ssh背景哦! 本文主要围绕如 ...

  8. unittest模块在linux报错: AttributeError: module 'unittest' has no attribute 'TestRunner'

    一开始在windows下运行没有问题,但是在linux下运行却报如下错误: ​ AttributeError: module 'unittest' has no attribute 'TestRunn ...

  9. PHP丨PHP基础知识之数据类型

    PHP的数据类型主要有三大种:(细分的话8小种) 一.标量数据类型 标量数据类型包括以下几种: (1)BOOLEAN:布尔型 布尔变量是PHP变量中最简单的: 它保存一个TRUE或者FALSE值: 其 ...

  10. AOP的概念

    1.1 什么是AOP? 软件开发一直在寻求更加高效.更易维护甚至更易扩展的方式.软件开发的目的,最终是为了解决各种需求,包括业务需求和系统需求.使用面向对象方法,我们可以对业务需求等普通关注点进行很好 ...