torefs 的作用是将 reactive 对象的每个顶层属性转为独立 ref，解决直接解构导致响应式丢失的问题；因为解构仅获取值副本，脱离 proxy 追踪，而 torefs 创建的 ref 通过 .value 与原属性双向绑定，保持响应性。
toRefs 的作用是把一个响应式对象（比如 reactive() 创建的对象）的**每个属性都转换成独立的 ref**，方便在解构或传给子组件时保持响应性。
为什么需要 toRefs？
直接解构 reactive 对象会丢失响应性。例如：
const state = reactive({ count: 0, name: 'Vue' })
const { count, name } = state // ❌ 解构后 count 和 name 不再是响应式
因为解构出来的只是普通变量，不是 ref，修改它们不会触发视图更新。toRefs 就是为了解决这个问题。
基本用法：批量转 ref
用 toRefs 包裹 reactive 对象，它会返回一个包含同名 ref 属性的对象：
import { reactive, toRefs } from 'vue'
export default {
setup() {
const state = reactive({
count: 0,
name: 'Vue',
isActive: true
})
// ✅ 转为 ref 对象
const stateRefs = toRefs(state)
// 现在可以安全解构（仍保持响应性）
const { count, name, isActive } = stateRefs
return {
count,
name,
isActive
// 或直接 return stateRefs（更简洁）
}
}
}
注意事项和常见写法
- toRefs 只对 reactive 对象的**顶层属性**生效，不递归处理嵌套对象
- 返回的 ref 的
.value指向原始 reactive 属性，修改 ref.value 等价于修改原对象属性 - 推荐在 setup 中用解构 + toRefs 组合，既保持响应性又写法简洁
- 如果只用部分属性，可以按需解构，不用全部展开
和 toRef 的区别
toRef 是针对单个属性创建 ref（如 toRef(state, 'count')），而 toRefs 是批量处理整个对象的所有可枚举属性。两者都维持与原 reactive 数据的连接，但适用场景不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
