toRefs用于解决reactive对象解构后失去响应性的问题；它将对象各属性转为ref，保留getter/setter，使count.value++等操作可触发视图更新，且仅适用于reactive对象。
使用 toRefs 是为了解决对响应式对象解构后失去响应性的问题。直接解构会断开与原始响应式数据的连接，导致视图不更新；toRefs 能把对象的每个属性都转成独立的响应式引用（ref），保留响应能力。
为什么解构后数据不更新？
Vue 3 的 reactive 返回的是一个代理对象，它的响应性依赖于对这个对象的属性访问。一旦你用解构把属性取出来，比如：
const { count, name } = reactive({ count: 0, name: 'Alice' })
得到的 count 和 name 就是普通 JS 值（不是 ref，也不带 getter/setter），后续修改它们不会触发视图更新。
toRefs 怎么解决这个问题？
toRefs 把响应式对象的每一个属性包装成一个 ref，保持其响应式连接。用法很简单：
- 先用
reactive创建响应式对象 - 再用
toRefs包装它 - 最后安全地解构出各个 ref
示例：
const state = reactive({ count: 0, name: 'Alice' });<br>const { count, name } = toRefs(state);<br>// ✅ 此时 count 和 name 都是 ref，可响应<br>count.value++ // 视图会更新
配合 setup 和解构传参更实用
在组合式 API 中，常把逻辑抽成函数并传入响应式对象。如果直接解构传参，子函数里就丢失响应性。用 toRefs 后再传，就能确保下游也能响应更新：
- 父组件：用
toRefs解构后传给自定义 Hook - 自定义 Hook 内：接收的是 ref，可用
.value读写，或用unref统一处理 - 避免在子函数中意外修改原始值（因为 ref 提供了明确的
.value接口）
注意：toRefs 只适用于 reactive 对象
toRefs 不能用于普通对象或 ref，否则返回的是普通引用，无响应性。常见误用：
-
toRefs(ref(1))→ ❌ 没意义，ref 本身已是响应式 -
toRefs({ count: 1 })→ ❌ 普通对象，不会变响应式 - 需要响应式，就先
reactive或用ref，再toRefs
如果只有一两个属性要解构，也可以直接用 ref + computed 或 shallowRef 替代，但 toRefs 是最简洁、语义最清晰的批量方案。
