Vue3.0为何转向Proxy：深入探讨defineProperty与Proxy的差异
版权申诉
172 浏览量
更新于2024-09-11
收藏 291KB PDF 举报
"Vue3.0使用Proxy替换Object.defineProperty的原因分析"
Vue3.0的响应式系统做出了重大改进，其中一个显著的变化就是从依赖`Object.defineProperty`转向使用`Proxy`来实现数据监听。这一转变主要是为了克服`Object.defineProperty`在处理复杂数据结构时的局限性，尤其是在数组变化监听方面的不足。
一、`Object.defineProperty`与数组下标变化
虽然有一些观点认为`Object.defineProperty`无法监听数组下标的变化，但其实这是对Vue2.x实现的一种误解。Vue2.x确实能够检测到数组变化，但它主要通过覆盖数组的七个变异方法（push、pop、shift、unshift、splice、sort、reverse）来实现。这是因为直接通过下标修改数组元素，如`vm.items[indexOfItem] = newValue`，无法触发`Object.defineProperty`的setter，所以Vue需要额外的工作来确保这些操作的响应性。
然而，`Object.defineProperty`本身是可以监听数组下标变化的，但Vue2.x没有选择这样做是因为这会带来额外的性能开销。当数组元素数量庞大时，监听每个元素的变化可能会造成不必要的性能损失。
二、`Object.defineProperty`的局限性
1. **深度监听**：`Object.defineProperty`只能对对象的属性进行定义，无法递归地处理嵌套的对象和数组，因此在处理复杂的数据结构时，需要手动深度遍历并处理每一个属性，增加了代码复杂性和运行时开销。
2. **动态添加属性**：当对象动态添加新的属性时，`Object.defineProperty`不会自动为其创建响应式的定义，需要额外的逻辑来处理这种情况。
3. **性能影响**：对于大规模数据的响应式，`Object.defineProperty`的遍历和定义过程可能会变得较为昂贵。
三、`Proxy`的优势
1. **全面代理**：`Proxy`可以完全包围一个对象，成为其“代理”，可以拦截所有访问该对象的行为，包括属性访问、赋值、删除、枚举、函数调用等，无需手动处理每一种操作。
2. **动态监听**：`Proxy`能够监听到对象动态添加或删除的属性，而无需预先知道所有的属性。
3. **性能优化**：虽然`Proxy`的创建比`Object.defineProperty`稍微慢一些，但在执行时，`Proxy`的拦截操作通常更高效，尤其是在处理复杂数据结构时。
4. **数组监听**：`Proxy`可以轻松地监听数组下标的变化，无需特殊处理，提升了代码的简洁性和可维护性。
Vue3.0采用`Proxy`替代`Object
为什么为什么Vue3.0使用使用Proxy实现数据监听实现数据监听(defineProperty表示不表示不
背这个锅背这个锅)
导导 读读
vue3.0中，响应式数据部分弃用了 Object.defineProperty ，使用 Proxy 来代替它。本文将主要通过以下方面来分析为什么vue选择
弃用 Object.defineProperty 。
Object.defineProperty 真的无法监测数组下标的变化吗？
分析vue2.x中对数组 Observe 部分源码
对比 Object.defineProperty 和 Proxy
一、无法监控到数组下标的变化？一、无法监控到数组下标的变化？
在一些技术博客上看到过这样一种说法，认为 Object.defineProperty 有一个缺陷是无法监听数组变化：
无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。所以vue才设置了7个变异数组（ push
、 pop 、 shift 、 unshift 、 splice 、 sort 、 reverse ）的 hack 方法来解决问题。
Object.defineProperty 的第一个缺陷,无法监听数组变化。 然而Vue的文档提到了Vue是可以检测到数组变化的，但是只有以下八
种方法, vm.items[indexOfItem] = newValue 这种是无法检测的。
这种说法是有问题的，事实上， Object.defineProperty 本身是可以监控到数组下标的变化的，只是在 Vue 的实现中，从性能/体验
的性价比考虑，放弃了这个特性。
下面我们通过一个例子来为 Object.defineProperty 正名：
function defineReactive(data, key, value) {
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function defineGet() {
console.log(`get key: ${key} value: ${value}`)
return value
},
set: function defineSet(newVal) {
console.log(`set key: ${key} value: ${newVal}`)
value = newVal
}
})
}
function observe(data) {
Object.keys(data).forEach(function(key) {
defineReactive(data, key, data[key])
})
}
let arr = [1, 2, 3] observe(arr)
上面代码对数组arr的每个属性通过 Object.defineProperty 进行劫持，下面我们对数组arr进行操作，看看哪些行为会触发数组的
getter 和 setter 方法。
1. 通过下标获取某个元素和修改某个元素的值通过下标获取某个元素和修改某个元素的值
可以看到，通过下标获取某个元素会触发 getter 方法, 设置某个值会触发 setter
方法。
接下来，我们再试一下数组的一些操作方法，看看是否会触发。
2. 数组的数组的 push 方法方法
下载后可阅读完整内容，剩余5页未读，立即下载
2020-10-16 上传
点击了解资源详情
点击了解资源详情
2020-10-16 上传
2021-01-19 上传
2020-12-12 上传
点击了解资源详情
点击了解资源详情
点击了解资源详情
weixin_38632916
- 粉丝: 4
- 资源: 964
我的内容管理
展开
最新资源
- JHU荣誉单变量微积分课程教案介绍
- Naruto爱好者必备CLI测试应用
- Android应用显示Ignaz-Taschner-Gymnasium取消课程概览
- ASP学生信息档案管理系统毕业设计及完整源码
- Java商城源码解析：酒店管理系统快速开发指南
- 构建可解析文本框：.NET 3.5中实现文本解析与验证
- Java语言打造任天堂红白机模拟器—nes4j解析
- 基于Hadoop和Hive的网络流量分析工具介绍
- Unity实现帝国象棋：从游戏到复刻
- WordPress文档嵌入插件：无需浏览器插件即可上传和显示文档
- Android开源项目精选：优秀项目篇
- 黑色设计商务酷站模板 - 网站构建新选择
- Rollup插件去除JS文件横幅：横扫许可证头
- AngularDart中Hammock服务的使用与REST API集成
- 开源AVR编程器：高效、低成本的微控制器编程解决方案
- Anya Keller 图片组合的开发部署记录
