reactive 专用于对象、数组等引用类型，基础类型无效；直接访问属性无需 .value，解构会丢失响应性，需用 torefs 保持；常与 ref 配合，前者管复杂结构，后者处理独立状态。
直接用 reactive 包裹一个普通对象或数组，就能让它变成深度响应式的状态——这是 Vue 3 管理表单、用户信息、配置项等复杂结构最简洁自然的方式。
适合什么数据？只认引用类型
reactive 专为对象、数组、Map、Set 等引用类型设计，基础类型（字符串、数字、布尔值）传进去不会报错，但返回的是原值，没有响应性：
- ✅ 正确：
reactive({ name: '李四', roles: ['admin', 'user'] }) - ✅ 正确：
reactive([{ id: 1 }, { id: 2 }]) - ❌ 错误：
reactive('hello')或reactive(100)—— 返回原值，不响应
怎么创建和在模板中使用？直接点属性，不用 .value
在 setup 中调用 reactive，得到的代理对象可直接读写属性，模板里也照常访问，无需额外解包：
- 定义：
const form = reactive({ username: '', password: '', tags: [] }) - JS 中修改：
form.username = 'admin'、form.tags.push('vue') - 模板中使用：
{{ form.username }}、{{ form.tags[0] }}
嵌套对象自动响应，但解构会“断连”
reactive 默认深度响应：子对象、子数组的任意变更都会触发更新。但要注意两个关键限制：
- ⚠️ 解构会丢失响应性：
const { username } = form后，username是普通变量，改它不更新视图 - ⚠️ 不能整体替换：
form = { ... }会切断响应式连接；如需重置，用Object.assign(form, newData)或逐个赋值 - ? 需要解构并保持响应？用
toRefs(form)，例如：const { username, tags } = toRefs(form)，之后通过username.value读写
和 ref 怎么配合？各干各的活
实际项目中，通常 reactive 管主结构，ref 处理独立状态：
- 用
reactive管整个表单：const formData = reactive({ ... }) - 用
ref管加载态、开关、异步结果：const loading = ref(false)、const userInfo = ref(null) - 理由：ref 对基础类型友好，支持解构后仍响应；reactive 对多层对象更直观，模板写法更干净
