Vue 的响应式原理中 Object.defineProperty 有什么缺陷？

叁歲伎倆 2023-08-17 15:54 106阅读 0赞

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

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

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

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

*  [ES6-Proxy 入门教程][ES6-Proxy]
 *  [Vue3.0 尝鲜，Object.defineProperty VS Proxy][Vue3.0 _Object.defineProperty VS Proxy]
 *  [面试官: 实现双向绑定Proxy比defineproperty优劣如何?][_Proxy_defineproperty]

转载于:https://www.cnblogs.com/wangxi01/p/11225555.html

[Vue]: https://segmentfault.com/a/1190000015783546
[Vue 3.0 _PPT]: https://docs.google.com/presentation/d/1yhPGyhQrJcpJI2ZFvBme3pGKaGNiLi709c37svivv0o/edit#slide=id.g4689c30700_0_93
[ES6-Proxy]: http://es6.ruanyifeng.com/#docs/proxy
[Vue3.0 _Object.defineProperty VS Proxy]: http://www.10tiao.com/html/780/201812/2650588659/1.html
[_Proxy_defineproperty]: https://juejin.im/post/5acd0c8a6fb9a028da7cdfaf

发表评论取消回复

表情：

评论列表（有 0 条评论，106人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue响应式原理

响应式原理 * 概述 * 如何追踪变化 * 检测变化的注意事项 * 声明响应式属性 * 异步更新队列概述现在是时候深入一下了！Vu...

小灰灰/ 2024年04月17日 05:49/ 0 赞/ 88 阅读

相关简述Vue的响应式原理

. 当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖...

拼搏现实的明天。/ 2024年04月17日 05:26/ 0 赞/ 61 阅读

相关 Vue 的响应式原理中 Object.defineProperty 有什么缺陷？

1. Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。Proxy可以劫持整个对象，并返

叁歲伎倆/ 2023年08月17日 15:54/ 0 赞/ 107 阅读

相关 Vue响应式原理

一、简介 > Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简

ゞ浴缸里的玫瑰/ 2023年06月22日 13:47/ 0 赞/ 46 阅读

相关 Vue的学习Ⅺ（响应式原理）

想要搞定响应式原理必须搞定两个问题： 1、当Vue里面的data数据改变时，Vue内部是如何监听数据的改变？ Object.defineProperty里的set与ge

我会带着你远行/ 2023年03月13日 06:47/ 0 赞/ 14 阅读

相关 vue2数据响应式的缺陷

<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.

红太狼/ 2023年01月20日 06:58/ 0 赞/ 197 阅读

相关 vue响应式原理

//响应式原理 let obj = { name: 'yangedong', age: 12 } O

我不是女神ヾ/ 2022年12月29日 09:45/ 0 赞/ 245 阅读

相关 Vue 响应式原理模拟

![e7f790c9060b53fa65d38f59830c7611.png][] 转载自：昆兰 https://juejin.cn/post/69461205117

喜欢ヅ旅行/ 2022年11月18日 05:58/ 0 赞/ 312 阅读

相关详解Vue响应式原理

摘要：搞懂Vue响应式原理！作者：[浪里行舟][Link 1] 原文：[深入浅出Vue响应式原理][Vue] [Fundebug][]经授权转载，版权归原作

r囧r小猫/ 2021年12月11日 06:37/ 0 赞/ 407 阅读

相关 vue响应式原理

vue的响应式，数据模型仅仅是普通的Javascript对象。当你修改它们时，视图会进行更新那么如何追踪变化：当把普通的js对象传给vue实例的data选项，Vue将遍

布满荆棘的人生/ 2021年09月30日 10:02/ 0 赞/ 413 阅读