解构 reactive 对象需用 toRefs/toRef 保持响应性，因解构会脱离 Proxy 代理链；嵌套属性自身也须用 reactive 初始化；深层字段应通过 computed 封装而非直接解构。
解构嵌套的 reactive 对象时，响应式容易“断连”，根本原因不是嵌套本身不支持，而是解构动作脱离了 Proxy 代理链。Vue3 的 reactive 是深度响应式的，但**解构操作会提取原始值，而非代理属性引用**——这一步就切断了响应式连接。
必须用 toRefs/toRef 解构顶层 reactive
哪怕对象是多层嵌套的，只要你要解构的是最外层 reactive 对象的直接属性，就必须用 toRefs 或 toRef：
-
批量解构：用
toRefs(state)，适用于固定字段、需全部暴露的场景 -
按需解构单个字段：用
toRef(state, 'user')，适合动态字段名或后续可能新增的属性 - 错误示范：
const { user } = state→user变成普通对象，再改user.name不触发更新
嵌套对象内部仍需 reactive 初始化
如果 state.user 本身是一个复杂对象（比如含 profile、settings），它也应是 reactive 创建的，而不是普通对象：
shopify-app-react-router
下载
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
- ✅ 正确：
const state = reactive({ user: reactive({ name: 'Alice', profile: reactive({ age: 25 }) }) }) - ❌ 危险：
const state = reactive({ user: { name: 'Alice', profile: { age: 25 } } })→profile.age修改不会响应 - 注意：
toRefs只解决“解构后保持响应”，不替代“嵌套结构本身要响应”
深层嵌套字段不能靠解构，要用 computed 或函数封装
如果你需要频繁访问像 state.user.profile.age 这样的深层路径，又想在模板中直接绑定并响应变化，不要尝试解构三级字段，而应：
- 用
computed封装读取逻辑：const userAge = computed(() => state.user?.profile?.age) - 或返回一个响应式子对象：
const userProfile = computed(() => state.user.profile)，然后在模板中用{{ userProfile.age }} - 避免把
state.user.profile.age直接赋给新变量再解构——那只是普通数字，毫无响应性
数组里含 reactive 对象时，遍历/映射要小心
当 state.list 是 reactive([])，且每项是 reactive 对象时：
- ✅ 安全操作：
state.list[0].name = 'Bob'、state.list.push(reactive({...})) - ⚠️ 高危操作：
const item = state.list[0]; item.name = 'Bob'→ 看似一样，但若item被重新赋值或缓存，就可能脱离代理 - 推荐写法：
const getItem = (i) => state.list[i]，始终通过响应式源访问
