vue2 用 object.defineproperty 实现响应式，存在无法监听新增/删除属性、数组索引赋值无效、不支持 map/set 等局限；vue3 改用 proxy，实现对象级拦截，天然支持动态属性、数组任意操作及原生集合类型，且更懒、更高效、更兼容 typescript。
Vue2 的响应式靠 Object.defineProperty 拦截属性访问
Vue2 在初始化时，会递归遍历 data 对象的每一层属性，对每个可枚举属性调用 Object.defineProperty，重写其 getter 和 setter。
getter 中做依赖收集（比如把当前组件的渲染函数记为该属性的订阅者），setter 中触发更新（通知所有订阅者重新执行）。
这种方案在 ES5 环境下是可行解，但有明显局限：
- 无法监听对象新增或删除的属性（必须用 Vue.set / Vue.delete）
- 对数组索引赋值（
arr[0] = newVal）或修改length无效，只能靠重写 7 个变异方法兜底 - 不支持
Map、Set、WeakMap等原生集合类型 - 初始化时深度遍历带来性能开销，尤其对大型嵌套对象
Vue3 改用 Proxy 实现更彻底的响应式控制
Vue3 使用 ES6 Proxy 代理整个对象，不再逐个定义属性，而是拦截对象层面的操作。
它能自然捕获：属性读取（get）、设置（set）、删除（deleteProperty）、新增（ownKeys / has）、in 操作、for...in 遍历，甚至包括 Array.length 变化和索引赋值。
关键改进点：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 响应式能力覆盖更广：原生支持
Map、Set、WeakMap等结构（通过reactive()包裹后） - 无需递归初始化：Proxy 是“懒代理”，只在真正访问嵌套属性时才递归处理子对象（提升首次响应式转换性能）
- 删除属性自动触发更新：不需要额外 API，
delete obj.key即可被侦测 - 与 TypeScript 配合更友好：Proxy 返回的是新对象，类型推导更稳定
为什么 Proxy 能解决 defineProperty 的根本瓶颈
Object.defineProperty 是属性级劫持 —— 它必须提前知道有哪些属性名，且无法监听“未来可能出现的属性”。
Proxy 是对象级代理 —— 它不关心具体有哪些键，只要操作发生在目标对象上，就能统一拦截。
这使得 Vue3 的响应式系统具备了“动态适应性”：无论是运行时新增字段、替换整个对象、还是使用复杂数据结构，都不再需要开发者手动干预。
比如：
-
state.newField = 'hello'→ 直接响应，无需Vue.set -
state.list.push(item)或state.list[5] = 'x'→ 全部可追踪 -
const map = reactive(new Map([['a', 1]]))→map.set('b', 2)触发更新
实际开发中要注意的差异点
虽然 Vue3 响应式能力更强，但迁移时仍有几个易忽略细节：
-
ref和reactive的适用场景不同：基本类型必须用ref，对象/数组优先用reactive；解构后会丢失响应性，需用toRefs - Proxy 无法代理普通对象以外的值（如
number、string字面量），所以ref(123)内部仍需包装成对象 - Vue2 的
vm.$set在 Vue3 组合式 API 中已移除，对应逻辑应转为直接赋值或使用shallowRef/customRef等进阶方案 - 某些依赖 Object.defineProperty 的第三方库（如部分老版表单校验插件）可能与 Vue3 响应式不兼容，需确认升级支持
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
