解构 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) → 得到可响应的 name ref
• 或者更简洁：改用 reactive 初始化，避免多一层 ref 嵌套

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！