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. ffmpeg m3u8生成 剪辑及格式转换

    使用 ffmpeg 工具, 生成 m3u8 文件 ffmpeg -re -i 03.ts -c copy -f hls -hls_base_url /Users/admin/Downloads/dow ...

  2. JS input输入框字数超出长度显示省略号.....

    样式添加: overflow:hidden; white-space:nowrap; text-overflow:ellipsis;

  3. nacos部署注意点

    官方Naming Configuration Service https://nacos.io/zh-cn/docs/deployment.html 划重点 单机部署 单机部署默认嵌入式存储数据 支持 ...

  4. 前端Javascript效果汇总

    1.DOM原生动态加载js <script type="text/javascript"> function loadJs(){ //得到html的头部dom var ...

  5. Remap 后的 USART1 不能发送数据

    最近在使用 STM32 的 USART1 时,遇到一点问题,记录一下. 如果 USART1 不是使用 PA9 和 PA10 作接收和发送引脚,而是 PB6 和 PB7,那么有一点就一定得注意了:此时 ...

  6. python中的常用BIF

    BIF:就是python的内置函数,为了方便程序员的! 1.input()输入 在这里,只讲python3,因为python2到python3有不小的变化 通俗的解释就是你在控制台不管输入什么东西,都 ...

  7. JavaScript常用项目(更新至19.11.17)

    目录 项目一:鼠标拖动方块 项目二:网页显示键入字母 项目三:实现滚播图 项目四:   本地数据记事本 项目一:鼠标拖动方块 代码: <!DOCTYPE html> <html> ...

  8. MyISAM 和 InnoDB 索引结构及其实现原理

    数据库索引,是数据库管理系统中一个排序的数据结构,以协助快速查询.更新数据库表中数据. 索引的实现通常使用B_TREE. B_TREE索引加速了数据访问,因为存储引擎不会再去扫描整张表得到需要的数据; ...

  9. 一文读懂：GBDT梯度提升

    先缕一缕几个关系: GBDT是gradient-boost decision tree GBDT的核心就是gradient boost,我们搞清楚什么是gradient boost就可以了 GBDT是 ...

  10. spring boot actuator端点高级进阶metris指标详解、git配置详解、自定义扩展详解

    https://www.cnblogs.com/duanxz/p/3508267.html 前言 接着上一篇<Springboot Actuator之一:执行器Actuator入门介绍>a ...