✨ Vue 3 的魔法：基于 Proxy 的响应式系统如何实现精准更新？

Vue 3：从 Getter/Setter 到 Proxy

Vue 3 的响应式系统是其核心亮点之一。与 Vue 2 基于 **`Object.defineProperty`** 的实现不同，Vue 3 全面转向了 **JavaScript Proxy** API。这一转变解决了 Vue 2 中遗留的两个核心痛点：

1. 新增属性的限制： Vue 2 无法监听对象上**新增的属性**，需要使用 `Vue.set`。Proxy 可以轻松监听对象的 所有操作（包括新增、删除、访问）。
2. 数组方法的限制： Vue 2 需要重写数组方法，Proxy 可以原生拦截数组的索引访问和方法调用。

基于 Proxy 的响应式系统实现了 **真正深度的、无侵入的** 响应式数据。当数据发生变化时，Proxy 能够更精准地通知依赖它的组件进行更新（精确到属性级别），从而减少不必要的渲染，带来 更高的性能和更简洁的 API（如 `ref` 和 `reactive`）。理解 Proxy 的工作机制，有助于开发者更好地把握 Vue 3 组件的渲染时机和性能优化方向。