torefs用于将reactive对象所有一级属性转为ref，解决解构丢失响应性问题；它返回普通对象，各属性为双向同步的ref，仅支持已存在属性且不处理深层嵌套。
直接对响应式对象（如 reactive 或 ref 的 .value）使用普通解构会丢失响应性，toRefs 就是用来解决这个问题的 —— 它把响应式对象的每个属性都转成独立的响应式引用（Ref），从而支持安全解构。
为什么普通解构会丢失响应性
Vue 的响应式系统依赖于对对象属性的“访问追踪”和“修改触发”。当你写 const { name, age } = user（其中 user 是 reactive({ name: 'Alice', age: 25 })），得到的是普通 JS 值（字符串、数字），不再是响应式代理的属性访问，后续对 name 的赋值不会触发视图更新。
toRefs 的基本用法
toRefs 接收一个响应式对象，返回一个由 ref 构成的对象，每个 ref 都与原对象对应属性保持同步：
- 原对象属性被修改 → 对应
ref.value自动更新 -
ref.value被修改 → 原对象对应属性同步更新 - 解构后的变量可直接在模板中使用（如
{{ name }}），也能在setup中参与计算或监听
配合解构使用的常见写法
通常搭配对象解构 + 扩展运算符使用，让代码更简洁：
// ✅ 正确：保留响应性
import { reactive, toRefs } from 'vue'
export default {
setup() {
const state = reactive({ count: 0, message: 'Hello' })
const { count, message } = toRefs(state) // 每个都是 ref
const increment = () => count.value++ // 必须通过 .value 修改
return { count, message, increment }
}
}
// ❌ 错误：丢失响应性
const { count, message } = reactive({ count: 0, message: 'Hello' })
// count 和 message 是普通值，修改不会触发更新
注意 toRefs 的适用边界
- 只适用于
reactive创建的对象，不适用于ref（ref本身已是响应式引用） - 对嵌套对象也有效，但仅做浅层转换（即只处理第一层属性）
- 如果需要解构后仍能直接赋值（如
count = 10），需配合toRef或使用computed包装，但要注意语义是否合理 - 在 TypeScript 中，
toRefs会保留类型推导，解构后变量类型为Ref<t></t>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
