Vue 3 响应式系统基于 Proxy，支持多层级对象、数组及 Map/Set 等结构的深层劫持，无需预遍历、自动响应动态增删属性，按需递归代理，兼容集合操作并消除 Vue 2 的诸多限制。
Vue 3 的响应式系统基于 Proxy 实现，相比 Vue 2 的 Object.defineProperty，它天然支持对多层级对象、数组、Map、Set 等数据结构的深层劫持，且无需手动触发依赖收集或通知更新。
Proxy 能直接拦截对象的任意操作
Proxy 可以监听 get、set、has、deleteProperty、ownKeys、defineProperty 等 13 种基本操作。Vue 3 利用 get 拦截读取属性时进行依赖收集，set 拦截赋值时触发更新。关键点在于：
- 不需要预先遍历所有属性，动态新增/删除属性自动响应
- 对数组索引赋值（如
arr[0] = 1）、length 修改、内置方法（push/pop/splice）等都能被拦截 - 支持嵌套对象：访问
obj.a.b.c时，每一层都会递归 reactive，实现真正的“懒代理”
多层级对象无需递归初始化，按需代理
Vue 3 的 reactive() 默认只对第一层属性做 Proxy，深层对象在首次被访问时才递归代理（通过 get 拦截中的 track + trigger + reactive() 延迟处理）。例如：
console.log(state.user.profile.name) // 触发 user → profile → name 逐层 reactive
这种机制避免了启动时的性能开销，也防止了对非响应式数据（如 Date、RegExp）误代理。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
支持 Map / Set / WeakMap / WeakSet 响应式
Object.defineProperty 无法拦截 Map/Set 的增删改查操作，而 Proxy 可以完整代理这些集合类型：
-
map.set(key, value)、map.delete(key)、map.clear()都能触发更新 - 遍历操作（
for...of、map.keys()、map.values()）也会触发依赖收集 - Weak 类型虽不可代理（因无法拦截其弱引用行为），但 Vue 3 明确不支持它们作为响应式源
避免 Vue 2 中的响应式限制与 hack
Vue 2 的局限在 Proxy 下基本消失：
- 不再需要
Vue.set()或vm.$set()添加响应式属性 - 不再需要特殊处理数组索引和 length 变更
- 可直接解构响应式对象（配合
toRefs），解构后仍保持响应性 - 支持 class 实例、自定义对象，只要符合 JavaScript 对象规范即可代理
