Vue3.0为何转向Proxy：深入探讨defineProperty与Proxy的差异

版权申诉

45 浏览量更新于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页未读，立即下载

weixin_38632916

粉丝: 4
资源: 964

Vue3.0为何转向Proxy：深入探讨defineProperty与Proxy的差异

vue cli3 配置proxy代理无效的解决

vue3为什么要用Proxy替代Object.defineProperty

vue3.0与vue2.0的区别

vue3.0响应式原理

Vue3.0 和 2.0 的响应式原理区别

vue3为什么用proxy

vue2中的defineproperty和vue3中的proxy的区别

监听vue数据 vue

vue3的proxy和vue2的object.defindproptype的区别

vue3的proxy是vue2的什么写法

最新资源