vue 3.4 起 reactive 支持深度自动解包嵌套对象中的 ref，如 state.user.profile.age 直接返回值而非 ref；但数组和 map 中的 ref 不解包，仍需 .value，因其 proxy 无法拦截索引或方法调用。
Vue 3 的 reactive 对深层嵌套对象的 ref 处理，比早期文档描述得更“智能”——它支持**深度自动解包**，但有明确边界。关键不是“能不能嵌套”，而是“解包在哪一层生效、哪些结构不参与”。
深层嵌套中的 ref 确实会被解包
从 Vue 3.4 起（2025 年底起稳定生效），reactive 不再只解包顶层属性，而是对嵌套对象路径中所有直接为 ref 的属性都做自动解包：
-
reactive({ user: { profile: { age: ref(25) } } }).user.profile.age→ 直接返回25，不是ref实例 - 修改也同步：
state.user.profile.age = 26会更新原始ref.value - 模板中同样无需
.value：{{ state.user.profile.age }}正常渲染并响应更新
但数组和 Map 中的 ref 不解包
即使在 reactive 内部，以下结构中的 ref **不会被解包**，访问时仍需手动取 .value：
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
-
reactive({ list: [ref(1), ref(2)] }).list[0]→ 返回ref(1)，不是1 -
reactive({ map: new Map([['a', ref(true)]]) }).map.get('a')→ 返回ref(true) - 原因：Proxy 无法拦截数组索引访问或 Map 方法调用的返回值，因此不触发解包逻辑
保持 ref 形态的实用策略
如果你需要某个字段始终是 ref 类型（比如要传给子组件的 defineModel，或需调用 .value 的副作用逻辑），别依赖解包：
- 把该 ref 放在
setup顶层，独立管理，不塞进reactive对象里 - 用
shallowRef替代普通ref，再放进reactive—— 它不会被解包，且仍具响应性 - 若已嵌套且必须拿到原始 ref，可用
toRaw(state).user.profile.age获取（仅调试或特殊场景，不推荐日常使用）
和 toRefs 的关系别混淆
toRefs 是把 reactive 对象的每个属性转成独立 ref，用于解构后保响应；而 reactive 内部的 ref 解包是读写时的语法糖，两者目的不同：
- 你不需要
toRefs来让state.user.profile.age可响应 —— 它本来就是 - 但如果你要解构出
age单独用，又想它保持响应，才需要const { age } = toRefs(state.user.profile)
