摘要：Vue2 响应式系统的核心是通过 Object.defineProperty 来实现数据劫持。然而，在 Vue 3 中，尤雨溪团队选择使用 Proxy 来重写响应式系统。这个重要的技术决策背后有着深刻的原因。
Vue2 响应式系统的核心是通过 Object.defineProperty 来实现数据劫持。然而，在 Vue 3 中，尤雨溪团队选择使用 Proxy 来重写响应式系统。这个重要的技术决策背后有着深刻的原因。
1. 对数组的有限支持
在 Vue 2 中，Object.defineProperty 无法直接监听数组的变化。Vue 2 不得不重写数组的以下方法来实现响应式：
pushpopshiftunshiftsplicesortreverse这意味着某些数组操作无法被自动检测到：
通过索引直接修改数组元素：arr[index] = newValue修改数组长度：arr.length = newLength2. 动态属性限制
使用 Object.defineProperty 时，必须预先知道对象的所有属性才能将其转换为响应式。这导致了以下问题：
无法检测对象属性的添加和删除需要使用特殊的 Vue.set 和 Vue.delete 方法降低了开发体验和代码直观性3. 性能开销
Vue 2 中的响应式系统需要：
深度遍历对象的所有属性为每个属性创建 getter 和 setter对嵌套对象进行递归处理这导致了初始化时的性能开销，特别是在处理大型对象时更为明显。
1. 完整的数组支持
Proxy 可以完全监听数组的所有操作，包括：
索引访问和修改长度修改所有数组方法不需要特殊处理即可实现完整的响应式2. 动态属性追踪
Proxy 提供了更强大的能力：
可以监听对象属性的添加和删除无需预先定义所有属性不再需要 Vue.set 和 Vue.delete提供了更自然的对象操作体验3. 更好的性能
Proxy 的优势在于：
Vue 2 中的实现：
function defineReactive(obj, key, val) { Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function { // 依赖收集 return val }, set: function(newVal) { if (val === newVal) return val = newVal // 触发更新 } })}Vue 3 中的实现：
function reactive(target) { return new Proxy(target, { get(target, key, receiver) { // 依赖收集 const result = Reflect.get(target, key, receiver) return result }, set(target, key, value, receiver) { const oldValue = target[key] const result = Reflect.set(target, key, value, receiver) if (oldValue !== value) { // 触发更新 } return result } })}欢迎补充。
来源：不秃头程序员
免责声明：本站系转载，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与本站联系，我们将在第一时间删除内容!
