vue 3用proxy重构响应式系统，实现新增/删除属性、数组任意操作、原生集合类型及深层嵌套的自动响应与性能优化。

Vue 3 用 Proxy 替代 Object.defineProperty，不是简单换一个 API，而是重构了整个响应式底层逻辑——它不再逐个属性“打补丁”，而是对整个对象做“全局代理”，从而绕开了 Vue 2 所有根本性限制。

新增/删除属性自动响应

Vue 2 中动态添加属性（如 obj.newKey = 'val'）不会触发更新，必须用 Vue.set()；删除属性同理。这是因为 defineProperty 只能拦截已存在的属性。

• Vue 3 的 reactive() 返回的是 Proxy 实例，对任意 key 的读写（包括不存在的 key）都会触发 get / set 拦截器
• 新增属性时，set 拦截器自动调用 track() 收集依赖，后续修改就能正确触发更新
• 删除属性（delete obj.key）也会被 deleteProperty 拦截，触发依赖清理和视图更新

数组操作全面覆盖

Vue 2 对数组索引赋值（arr[0] = newVal）、length 修改、清空（arr.length = 0）均不响应，只能靠重写变异方法兜底。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• Proxy 可拦截 set、deleteProperty、length 属性变更等所有操作，数组行为完全透明
• arr[100] = 'x'、arr.length = 5、delete arr[0] 全部可响应
• 无需特殊处理，也不需要额外封装数组方法

原生集合类型原生支持

Vue 2 完全无法响应 Map、Set、WeakMap 等结构，开发者只能退化为普通对象模拟。

• Proxy 天然支持对 Map、Set 的 get、set、has、delete、clear 等全部操作拦截
• reactive(new Map([['a', 1]])) 可直接使用，增删查改均触发更新
• 甚至支持 class 实例、FileList 等复杂对象的响应式包装

初始化性能与深层嵌套更可控

Vue 2 初始化时需递归遍历整个 data 树，每个属性都调用 defineProperty，大对象或深嵌套会明显卡顿。

• Proxy 是懒代理：只有真正访问某个属性时，才触发 get 并进行依赖收集
• 未读取的深层属性不会提前劫持，内存和初始化开销大幅降低
• 配合 shallowRef 和 shallowReactive，可精确控制响应深度，避免无谓代理

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！