reactive专为复杂对象设计，将普通对象转为响应式代理，支持嵌套属性、数组、动态增删及内部方法；仅接受对象或数组，不支持基本类型，需避免赋值替换整个对象。

Vue 3 中 reactive 专为定义复杂对象而设计，它把普通对象转成响应式代理，让嵌套属性、数组、方法等都能被自动追踪更新。关键在于：它只接受对象或数组，不能用于字符串、数字、布尔值等基本类型。

适合用 reactive 的复杂对象结构

典型特征是含多层属性、关联字段、动态增删的子对象或数组。比如用户资料、表单状态、分页配置、商品详情等。

• 有嵌套对象：address: { city: '北京', district: '朝阳区' }
• 含数组字段：tags: ['vue', 'js'] 或 items: [{ id: 1, name: 'item1' }]
• 多个逻辑相关的字段聚合在一起，如分页参数：{ pageNum: 1, pageSize: 10, total: 0 }
• 需要在对象内直接放方法（如操作自身数据）：addItem() { this.items.push(...) }

正确写法与常见错误

必须传入一个普通对象，返回的是代理对象，原对象不会变，也不应再直接使用原对象。

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

• ✅ 正确：用解构前先确保是对象，且不提前解构破坏响应性
  const form = reactive({ username: '', password: '', profile: { avatar: '' } })
• ❌ 错误：对基本类型调用 reactive
  reactive('hello') // 报错
• ❌ 错误：用 ref 包裹后再传给 reactive（多余且失效）
  reactive(ref({ x: 1 })) // 不推荐，失去意义
• ⚠️ 注意：不能用赋值替换整个 reactive 对象，否则会丢失响应性
  form = { username: 'new' } // ❌ 响应性断开；应逐个赋值或用 Object.assign

嵌套对象和数组的响应式表现

Proxy 天然支持深层响应，无需手动标记子对象。修改任意层级属性都会触发更新。

立即学习“前端免费学习笔记（深入）”；

• 修改嵌套字段：form.profile.avatar = 'avatar.png' → 视图立即更新
• 数组操作安全：form.tags.push('typescript')、form.items[0].name = 'updated' 都能被侦测
• 新增属性也响应：form.newField = 'added'（Proxy 支持动态添加）
• 但删除属性需用 delete form.field 或 Reflect.deleteProperty，普通 delete 可能不触发更新（取决于 Proxy handler 实现，Vue 默认支持）

配合模板和组合式 API 使用

在 <template> 中可直接访问属性，无需 .value；在 setup() 中也直接读写。

• 模板中：{{ form.username }} {{ form.profile.city }}
• 脚本中：if (form.username.length > 0) { ... }
• 返回给模板时，直接解构或整体暴露：return { form, handleSubmit }
• 若需解构后仍保持响应，用 toRefs(form)，否则解构会丢失响应性