reactive 用于创建深层嵌套对象的响应式状态，支持直接点语法访问，解构需用 toRefs 保持响应性，常与 ref 配合管理主数据和独立状态。
直接用 reactive 包裹一个普通对象，就能创建复杂结构的响应式状态。它天然支持深层嵌套，不需要对子对象再做额外处理。
适合用 reactive 的场景
当你的数据本身就是多层对象或数组时，比如用户资料、表单字段、配置项，用 reactive 最自然：
- 结构较深：如
{ user: { profile: { avatar: '', bio: '' } }, permissions: ['read', 'write'] } - 属性较多且关联性强，不常单独拆出来使用
- 你希望在模板中直接写
{{ state.user.profile.avatar }}，而不是一堆.value
正确创建和使用方式
在 setup() 或 <script setup> 中调用即可：
React Router Code Review
下载
审查 React Router 代码，确保数据加载、变更、错误处理和导航模式符合规范，适用于 React Router v6.4+ 代码、加载器及其他特性。
- 传入一个普通对象或数组，不能是
null、undefined或基本类型（如字符串字面量） - 返回的是一个 Proxy 代理对象，所有属性访问和修改都自动响应
- 模板中直接使用点语法，无需
.value：{{ state.count }} {{ state.user.name }} - JavaScript 中读写也直接点属性：
state.count++、state.user.name = '李四'
解构时要注意响应性丢失
直接解构会切断响应链接：
- ❌ 错误：
const { count, user } = state→count变成普通变量，改它不触发更新 - ✅ 正确：用
toRefs转换：const { count, user } = toRefs(state)，之后count.value才可读写 - 如果只是临时读取，不打算修改，解构没问题；但涉及赋值操作，必须用
toRefs或保持原对象访问
和 ref 配合使用的常见模式
实际项目里很少只用一种，而是按职责分工：
- 用
reactive管理主数据对象，比如整个表单：const form = reactive({ name: '', email: '' }) - 用
ref管理独立的状态标志，比如加载中、弹窗显隐：const loading = ref(false) - 异步获取的数据对象，也常用
reactive包裹后统一管理，避免每个字段都用ref
