reactive 专为对象、数组、Map、Set 等引用类型设计，对基础类型无效；返回的代理对象深度响应，但解构会丢失响应性，不可直接赋值替换，JSON 序列化需配合 toRaw。
直接用 reactive 包一层普通对象，就能让整个对象（包括嵌套属性）变成响应式——这是 Vue 3 处理复杂对象状态最常用、最自然的方式。
reactive 适合什么数据？
它专为引用类型设计：对象、数组、Map、Set 都行，但不能传字符串、数字、布尔值等基础类型。传了也不会报错，但返回的是原值，不是响应式代理。
- ✅ 正确：reactive({ user: { name: '张三', profile: { age: 25 } } })
- ❌ 错误：reactive('hello') 或 reactive(42) —— 会直接返回原值，无响应性
创建和使用响应式对象
在 setup 中调用 reactive，得到的代理对象可直接解构读取、赋值修改，模板里也照常访问嵌套属性：
- 引入：
import { reactive } from 'vue' - 定义：
const form = reactive({ username: '', password: '', errors: [] }) - 模板中：
{{ form.username }}、{{ form.errors[0] }} - JS 中修改：
form.username = 'admin'、form.errors.push('密码太短')—— 视图立刻更新
注意深层响应与常见陷阱
reactive 默认是深度响应：内部任意层级的对象、数组变更都会被监听到。但有三个关键细节必须留意：
立即学习“前端免费学习笔记（深入）”；
-
解构会丢失响应性：比如
const { username } = form，之后改username不触发更新；应始终通过form.username访问 -
不能直接替换整个对象：写
form = { ... }会切断响应式连接；如需重置，应逐个赋值或用Object.assign(form, newData) -
Proxy 代理不可枚举：
JSON.stringify(form)可能得不到预期结果；需要先用toRaw(form)转回原始对象再序列化
何时搭配 toRefs 更友好？
如果想把响应式对象的多个属性“解构”后仍保持响应性（比如在模板中频繁用 username 而非 form.username），可用 toRefs：
const form = reactive({ username: '', password: '' })const { username, password } = toRefs(form)- 此时
username.value是响应式的，模板中可直接写{{ username }}（因模板自动解包 .value）
