Vue3 响应式数据太炸裂！Proxy + Reflect 源码级解析，看完我跪了！

「小墨是前端」致力于分享实用前端技术、挖掘优秀的开源项目，带你探索前端的奇妙世界，共同学习进步。

还在傻傻分不清 Vue3 的响应式和 Vue2 有啥区别？还在为数据变化追踪不到而头疼？本期小墨就带你彻底搞懂 Vue3 响应式的核心：Proxy和Reflect！

别再用 Object.defineProperty 了！Proxy 才是未来！

在 Vue2 中，我们通过Object.defineProperty来劫持数据的 getter 和 setter，从而实现响应式。但这种方式存在一些硬伤：

•无法监听数组变化：对数组的push、pop、splice等方法无法直接监听。

•需要遍历对象属性：必须预先知道要监听哪些属性，无法动态添加响应式属性。

•代码繁琐：需要编写大量的 getter 和 setter，代码冗余。

而 Vue3 使用的Proxy，则完美地解决了这些问题。Proxy可以直接代理整个对象，无需遍历属性，也能监听数组的变化。它提供了 13 种拦截操作，让你对对象的操作了如指掌！

Proxy

Proxy就像一个保镖，所有对目标对象的操作，都必须经过它的“同意”。你可以自定义这个“保镖”的行为，让它在数据被访问、修改、删除等情况下做出相应的反应。

下面是一个完整的、可直接运行的示例，展示了Proxy的基本用法：

在这个例子中，我们通过get和set拦截器，监听到对proxyUser对象属性的读取和设置操作。当点击按钮修改姓名或增加年龄时，set拦截器会被触发，我们不仅更新了视图，还通过highlightChange函数将变化的属性高亮显示，让用户更直观地看到数据的变化。

Reflect

Reflect对象提供了一系列静态方法，用于操作对象。它的方法与Proxy的拦截器一一对应，可以更方便地实现默认行为，让你的代码更优雅、更安全。

Vue3 响应式原理：Proxy + Reflect + 精妙流程！

Vue3 的响应式系统巧妙地结合了Proxy和Reflect。当组件的数据发生变化时，Proxy会拦截到这些变化，并通过Reflect来更新数据，然后通知相关的“观察者”（Watcher）进行视图更新。

下面这张流程图，详细地展示了 Vue3 响应式数据变化的过程：