直接解构 reactive 对象会导致响应性丢失，必须用 toRef 保持单个属性响应性；toRef(state, 'key') 创建与源属性双向同步的 ref，修改 ref.value 或 state.key 均实时联动。
直接解构 reactive 对象会导致响应性丢失，因为解构出来的只是普通值的副本，不再受 Proxy 拦截。要保持单个属性的响应性，必须用 toRef 将其转为一个与源属性双向同步的 ref。
toRef 的核心作用
toRef(state, 'key') 会从 reactive 对象中“抽出”指定属性，生成一个 ref，这个 ref 不是独立副本，而是和 state.key 实时联动：
- 修改
ref.value→state.key立即更新，视图响应 - 修改
state.key→ref.value自动同步，无需手动刷新 - 即使
state.key初始不存在，后续动态添加也会被自动捕获
典型使用场景
适合需要把 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
- 传给子组件的 prop（子组件接收 ref，父组件仍可统一管理 state）
- 作为组合式函数（Composable）的输入参数，比如
useInput(toRef(state, 'query')) - 在模板中绑定表单字段，同时保留对整个 state 的集中控制
对比直接解构和 toRef
假设 const form = reactive({ username: '', password: '' })：
- ❌ 错误写法：
const { username } = form→username是字符串，改它不触发更新 - ✅ 正确写法：
const usernameRef = toRef(form, 'username')→usernameRef.value可读可写，始终与form.username同步 - ? 模板中可直接写
{{ usernameRef }}（Vue 自动解包），无需.value
配合 toRefs 批量处理
如果要解构多个属性，用 toRefs 更简洁：
const { username, password } = toRefs(form)- 返回的是一个普通对象，每个属性都是 ref，全部保持响应联动
- 注意：这个解构后的对象本身不是响应式的，但它的每个字段是
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
