解构 reactive 对象会丢失响应式，因为解构得到的是值的副本而非响应式代理引用；toRefs 将每个属性转为独立 ref，使解构后仍可通过 .value 保持响应式更新。
为什么 reactive 解构会丢失响应式
使用 reactive() 创建的响应式对象，如果直接用 ES6 解构（如 const { count, name } = state），解构出来的变量就不再是响应式的。这是因为解构只是把原始值“拷贝”出来，相当于做了 const count = state.count —— 得到的是一个普通 JS 值，与原响应式对象再无关联。
toRefs 是怎么解决这个问题的
toRefs() 会把 reactive 对象的每一个属性都包装成一个 ref，返回一个包含多个 ref 的对象。这些 ref 的 .value 仍指向原始 reactive 对象中的属性，因此保持响应式连接。
常见写法：
const state = reactive({ count: 0, name: 'Alice' });<br>const { count, name } = toRefs(state); // ✅ 每个都是 ref，保留响应式
在 setup 中正确使用的典型模式
在 Vue 3 的 setup() 或组合式函数中，推荐这样组织：
- 先用 reactive 统一管理状态结构（便于逻辑分组、避免大量 ref 声明）
- 用 toRefs 解构，供模板或子组件使用（模板中可直接写
{{ count }}，Vue 会自动解包 ref） - 需要修改时，仍通过原 reactive 对象或解构后的 ref.value（如
count.value++）
注意：toRef 和 toRefs 的区别
toRef(state, 'count') 只为单个属性创建 ref，适合只暴露部分字段；toRefs(state) 是批量处理全部响应式属性。两者都维持与源对象的响应式链接，但 toRef 还能用于非响应式对象的某个属性（懒创建）。
不推荐混用：const { count } = toRefs(state); const other = toRef(state, 'other'); 可以，但通常统一用 toRefs 更清晰。
