解构 reactive 对象会导致响应式丢失，因为取值是原始副本而非 Proxy 代理；toRefs 将每个属性转为 ref，使解构后仍可响应更新。
直接解构 reactive 对象会导致响应式丢失，因为解构出的是普通值，脱离了 Proxy 的追踪范围；toRefs 的作用就是把响应式对象的每个属性都转成独立的 ref，让解构后的变量依然能触发视图更新。
为什么解构会断开响应式连接
Vue 3 的响应式依赖 Proxy 拦截对整个对象的访问。一旦你写 const { count } = state，JavaScript 就会从 state 中取出 count 的当前值（比如数字 0），这个值是原始副本，不再经过 Proxy，修改它不会通知 Vue。
- Proxy 只代理对象本身，不代理它的“子表达式”或“解构结果”
-
state.count是响应式读取，const count = state.count是一次性的值拷贝 - 模板中直接用
{{ count }}时，如果count不是 ref 或 reactive 属性，就不会建立依赖
toRefs 的正确用法
必须先用 toRefs 包裹响应式对象，再解构；返回的每个属性都是 ref，读写需通过 .value（模板中可省略）。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 导入并调用：
import { reactive, toRefs } from 'vue' - 创建响应式源：
const state = reactive({ count: 0, name: 'Alice' }) - 包裹后解构：
const { count, name } = toRefs(state) - 在
setup返回值中暴露：return { count, name }
配合 setup 的常见实践
在组合式函数或 setup 中，推荐按逻辑分组处理响应式对象，避免混用或漏包。
立即学习“前端免费学习笔记（深入）”；
- 多个 reactive 对象分别
toRefs：...toRefs(user), ...toRefs(config) - 不要对非响应式对象调用
toRefs，它会返回空对象，无报错但无效 - 计算属性、方法可直接返回，无需
toRefs包裹 - 动态新增属性（如
obj.newField = xxx）会被 Proxy 拦截，但前提是该属性必须在toRefs执行前已存在，否则解构结果里没有对应 ref
ref 套对象时怎么用 toRefs
当数据用 ref({ ... }) 定义时，不能直接对 ref 调用 toRefs，要先取 .value 再转：
- 错误：
const user = ref({ name: 'Tom' }); const { name } = toRefs(user)→ 报错或无效 - 正确：
const { name } = toRefs(user.value)→ 得到可响应的nameref - 或者更简洁：改用
reactive初始化，避免多一层ref嵌套
