vue 3 用 proxy 替代 object.defineproperty，实现从“监听属性”到“监听操作”的升级：支持懒加载、动态增删改、完整元操作拦截，使响应式更贴合原生 js 直觉且类型推断更准确。
Vue 3 放弃 Object.defineProperty，核心不是“换了个 API”，而是把响应式系统从“监听属性”升级为“监听操作”——Proxy 让响应式真正贴合开发者写代码的直觉。
拦截粒度：从属性级到对象级
Object.defineProperty 必须逐个属性设置 getter/setter，意味着 Vue 2 启动时就得递归遍历整个 data 对象，哪怕深层属性根本不会被用到。Proxy 直接代理整个对象，只在属性首次被读取或赋值时才触发依赖收集，天然支持懒加载。
- 深层嵌套对象（如 user.profile.address.city）不用一上来就全劫持
- 未访问的分支不执行任何响应式逻辑，内存和初始化耗时明显下降
动态性：新增、删除、索引修改全部原生支持
Vue 2 中 this.obj.newKey = value 或 this.arr[5] = item 不会更新视图，必须绕道 this.$set；数组长度重置、delete this.obj.key 同样失效。这些“例外场景”本质是 defineProperty 的能力边界——它只管已存在的属性。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- Proxy 的 set 和 deleteProperty 拦截器直接捕获任意属性赋值与删除动作
- 数组索引赋值、length 修改、push/pop/splice 全部走同一套拦截逻辑，无需额外重写原型方法
操作覆盖：不止 get/set，还有 in、keys、has、ownKeys 等元操作
Vue 2 无法响应 Object.keys(obj)、'key' in obj 或 for...in 的变化，因为 defineProperty 压根不介入这些行为。Proxy 提供 13 种 trap（如 ownKeys、has），让响应式能覆盖对象的完整生命周期。
- for (let k in reactiveObj) 能自动追踪新增/删除的可枚举属性
- Reflect.ownKeys() 返回结果变化也能触发更新，适合实现更智能的列表渲染或表单联动
代码更自然，心智负担更小
开发者不再需要记住哪些操作“安全”、哪些要调 API。赋值就是赋值，删属性就是删属性，数组下标就是数组下标——所有 JS 原生写法都有效。
- 告别 this.$set(this.list, i, val) 这类非直觉语法
- 不再因忘记用 Vue.set 导致视图不更新而排查半天
- TypeScript 类型推断也更准确，因为 Proxy 不改变原始对象结构，只是包裹一层行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
