必须用 toRefs 是因为 reactive 返回 Proxy 仅代理对象整体，解构出的值是脱离追踪的普通副本；toRefs 将每个属性转为 ref，维持与原对象的双向响应连接。
直接解构 reactive 对象会导致响应式丢失，因为解构出的是普通值，脱离了 Proxy 的追踪。要安全解构并保持响应式，必须用 toRefs 包裹后再解构。
为什么必须用 toRefs？
Vue 3 的 reactive 返回的是一个 Proxy 代理对象，响应式能力只作用于整个对象层面。一旦执行 const { count } = state，JavaScript 就把 state.count 当前的值（比如数字 0）拷贝为一个独立的局部变量——它不再是响应式链路中的一环，修改它不会触发视图更新，也不会同步回原对象。
toRefs 的正确用法
toRefs 接收一个 reactive 对象，返回一个普通对象，其中每个属性都是一个 ref，且与原对象对应属性保持双向绑定：
- 修改
ref.value→ 原对象属性同步更新 → 视图响应 - 修改原对象属性 →
ref.value自动更新（在模板中可直接用，无需.value）
示例：
立即学习“前端免费学习笔记（深入）”；
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
import { reactive, toRefs } from 'vue'<br>const state = reactive({ count: 0, name: 'Alice' })<br>const { count, name } = toRefs(state)<br><br>function increment() {<br> count.value++ // 必须加 .value<br>}
在 setup 中的典型模式
推荐统一处理、分组暴露：
- 多个
reactive对象，分别调用toRefs，再用展开运算符合并 - 计算属性、函数等非响应式内容，直接返回，不包
toRefs - 模板中使用时无需
.value，Vue 会自动解包
例如：
return {<br> ...toRefs(user),<br> ...toRefs(config),<br> save() { /* 逻辑 */ }<br>}
toRefs 和 toRef 的区别
toRefs 适合批量解构整个 reactive 对象；toRef 更轻量，只针对单个属性，且不要求源对象一定响应式：
-
toRefs(state)→ 返回所有属性的ref映射（要求state是reactive） -
toRef(state, 'count')→ 只提取count字段为ref，即使count后续才被添加也有效
