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></template> 中可直接访问属性，无需 .value；在 setup() 中也直接读写。
- 模板中：
{{ form.username }} {{ form.profile.city }} - 脚本中：
if (form.username.length > 0) { ... } - 返回给模板时，直接解构或整体暴露：
return { form, handleSubmit } - 若需解构后仍保持响应，用
toRefs(form)，否则解构会丢失响应性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
