在 Vue 2.x 中，为了响应式地追踪对象属性的变化，Vue 使用了 Object.defineProperty 方法。但是，Object.defineProperty 有一些限制，比如它不能追踪属性的添加或删除，也不能直接用于数组或对象原型链上的属性。
Vue 3.x 通过使用 ES6 的 Proxy 对象来解决了这些问题。Proxy 允许你创建一个对象的代理，从而定义基本操作的自定义行为，包括属性查找、赋值、枚举、函数调用等。
Vue 3.x 使用 Proxy 取代 Object.defineProperty 主要是出于以下几个原因：
更好的性能：虽然 Proxy 在某些情况下可能比 Object.defineProperty 稍慢，但 Vue 3.x 通过优化和缓存来减少了这种差异。更重要的是，Proxy 提供了更简单的逻辑来追踪变化，减少了代码复杂性和潜在的错误。
支持数组和对象属性的添加/删除：使用 Proxy，Vue 3.x 可以轻松地追踪数组或对象属性的添加或删除。这在 Vue 2.x 中是不可能的，除非你显式地使用 Vue.set 或其他方法来确保响应式。
更好的扩展性：由于 Proxy 可以拦截更多的操作，Vue 3.x 可以更容易地添加新的响应式特性
在 Vue 3 中，Proxy 对象被用来实现其响应式下面是一个简单的 Vue 3 响应式 Proxy 的例子，尽管在实际开发中，我们通常不会直接操作 Proxy，而是使用 Vue 提供的 API，但理解其背后的原理是有帮助的。
javascript
// 假设这是我们的原始数据对象
const rawData = {
name: 'John',
age: 30,
address: {
city: 'New York'
}
};
// 创建一个函数来生成响应式对象
function reactive(target) {
if (typeof target !== 'object' || target === null) {
return target;
}
// 使用 Proxy 来包装目标对象
const handler = {
get(target, key, receiver) {
// 如果是嵌套对象，也需要是响应式的
const value = Reflect.get(target, key, receiver);
return reactive(value);
},
set(target, key, value, receiver) {
// 当属性被设置时，触发更新
const oldValue = target[key];
const hadKey = oldValue !== undefined;
const result = Reflect.set(target, key, value, receiver);
// 触发更新逻辑（在这里只是简单打印）
if (!hadKey) {
console.log(`New key "${key}" added with value ${value}`);
} else if (oldValue !== value) {
console.log(`Key "${key}" updated to value ${value}`);
}
// 返回操作结果
return result;
}
};
// 使用 Proxy 包装目标对象并返回
return new Proxy(target, handler);
}
// 生成响应式对象
const reactiveData = reactive(rawData);
// 访问和修改响应式对象
console.log(reactiveData.name); // "John"
reactiveData.name = 'Jane'; // "Key "name" updated to value Jane"
reactiveData.address.city = 'Los Angeles'; // 注意：这里的嵌套对象需要单独处理
// 嵌套对象也需要通过 reactive 变成响应式
reactiveData.address = reactive(reactiveData.address);
reactiveData.address.city = 'San Francisco'; // 现在会触发更新
注意：在上面的例子中，我们仅仅处理了对象的第一层属性。对于嵌套对象，我们需要在访问时递归地调用 reactive 函数来确保它们也是响应式的。在实际开发中，Vue 3 提供了更完善的实现来处理各种复杂的情况，包括数组、Map、Set 等。