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. 免费 IP 代理池示例

    使用文档 import requests import re import random from concurrent.futures import ThreadPoolExecutor impor ...

  2. mysql where与 having的区别

    where是针对磁盘的数据文件,having是针对存在内存的结果集的筛选. 例如: select name ,(xxx - xxx) as a from table where a > 10; ...

  3. [AHOI2017/HNOI2017]单旋

    题目   点这里看题目. 分析   最妙的地方在于,这道题其实是用一种数据结构模拟另一种数据结构!   我们需要维护深度和树的结构,以下对于每个操作进行分别讨论. 插入一个新节点   可以发现,这个新 ...

  4. @luogu - P6109@ [Ynoi2009]rprmq

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 有一个 n×n 的矩阵 a,初始全是 0,有 m 次修改操作和 ...

  5. (五)连接查询(SQL99标准)、子查询、分页查询、联合查询

    一.连接查询(SQL99标准) 1.含义:当要查询的数据来自多张表时要使用连接查询 2.语法: select 查询列表 from 表1 别名 [连接类型] join 表2 别名 on 连接条件 [wh ...

  6. 安装Zabbix5.0

    目录 概述 支持的平台 安全相关 支持TimescaleDB agent升级 垂直菜单 部署 安装要求 数据库要求 前端要求 服务端要求 Agent 2 Java gateway 安装 配置镜像源 安 ...

  7. RocketMQ系列(六)批量发送与过滤

    今天我们再来看看RocketMQ的另外两个小功能,消息的批量发送和过滤.这两个小功能提升了我们使用RocketMQ的效率. 批量发送 以前我们发送消息的时候,都是一个一个的发送,这样效率比较低下.能不 ...

  8. Excel只想显示一部分日期,怎样把其余部分隐藏起来?

      问题:只想显示一部分日期,怎样把其余部分隐藏起来? 方法:分列 Step1:选中需要修改的单元格——数据——分列. Step2:固定宽度——点击下一步. Step3:在建立分列处单击鼠标(若想取消 ...

  9. JSON案例

    原文链接:https://zhuanlan.zhihu.com/p/62763428 json字符串->JSONObject 用JSON.parseObject()方法即可将JSon字符串转化为 ...

  10. Thunk函数的使用

    Thunk函数的使用 编译器的求值策略通常分为传值调用以及传名调用,Thunk函数是应用于编译器的传名调用实现,往往是将参数放到一个临时函数之中,再将这个临时函数传入函数体,这个临时函数就叫做Thun ...