vue 3 的 reactive 基于 proxy + reflect 实现，支持新增/删除属性、数组索引与 length 变更、嵌套对象惰性代理及 map/set 等原生集合响应式，彻底突破 vue 2 的限制。
Vue 3 的 reactive 本质是用 Proxy + Reflect 构建的代理对象，它不是对原始数据“打补丁”，而是创建一个全新代理层来统一拦截所有操作。这直接绕开了 Vue 2 基于 Object.defineProperty 的根本性限制，让响应式真正覆盖日常开发中的各种写法。
新增/删除属性不再需要特殊 API
Vue 2 中，obj.newKey = value 或 delete obj.key 完全无效，必须调用 Vue.set() 或 Vue.delete() —— 因为 defineProperty 只能监听初始化时就存在的属性。
而 reactive 返回的 Proxy 对象可捕获 set 和 deleteProperty 拦截器：
- 给响应式对象加新属性（如
state.user.role = 'admin'），会触发 set 拦截，自动建立响应式连接 - 执行
delete state.user.name，会触发 deleteProperty 拦截，同时通知依赖更新 - 无需额外 API，语义自然，符合 JavaScript 原生行为
数组索引与 length 变更原生响应
Vue 2 无法监听 arr[0] = 'x' 或 arr.length = 0，只能靠重写 7 个方法“兜底”。
reactive 的 Proxy 对数组同样生效：
aperture: the L402 aware reverse proxy
下载
安装并运行 Aperture（Lightning Labs 的 L402 闪电反向代理），用于创建 L402 付费墙、配置付费 API 端点、为其他代理托管付费内容或测试 L402 认证流程。
- 直接赋值
list[1] = 'b'→ 触发 set 拦截，精准追踪该索引变化 - 修改长度
list.length = 1→ 触发 set 拦截（length 是数组自有属性） - 甚至
list.push()、list.pop()等底层也是通过 set/length 更新触发的，无需单独重写
嵌套对象按需代理，启动更快、内存更省
Vue 2 初始化时递归遍历整个 data 树，每个属性都挂 getter/setter，深层对象或大数组会导致明显卡顿。
reactive 采用惰性代理策略：
- 只在首次访问某个属性（如
state.profile.address.city）时，才对address执行reactive() - 未读取的深层字段不生成代理，节省初始化时间和内存
- 避免“为可能永远不用的数据提前买单”
支持 Map、Set、WeakMap 等原生集合类型
Vue 2 完全不支持 Map 或 Set 的响应式，哪怕包装进 data 里也无反应。
Proxy 能拦截 get、set、has、deleteProperty、ownKeys 等 13 种操作，因此：
-
const map = reactive(new Map([['a', 1]]))后，map.set('b', 2)可触发更新 -
map.has('a')、map.delete('a')等操作全部可被拦截并收集依赖 - 真正意义上把响应式能力扩展到现代 JS 的完整对象生态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
