toRefs 是 Vue 3 中解决 reactive 对象解构后响应式丢失的标准方案，它将对象所有顶层属性转为独立 ref，保持与源属性双向同步；解构后需用 .value 修改，模板中可直接 {{ count }} 使用。
直接用 toRefs 就能把 reactive 对象的所有顶层属性转成独立的 ref，解构后依然保持响应式，这是 Vue 3 中解决“解构失响应”问题的标准做法。
为什么要用 toRefs？
reactive 创建的对象本身是响应式的，但一旦解构：
const { count, name } = state
解构出的变量就脱离了 Proxy 代理，变成普通 JS 值——后续修改不会触发视图更新。
- toRefs 不是复制值，而是为每个属性创建一个“指向源属性的 ref 引用”
- 修改
count.value等价于修改state.count，双向同步 - 模板中可直接写
{{ count }}，Vue 自动解包，不用写.value
基础用法：解构 + 使用
在 setup 中按如下方式处理：
import { reactive, toRefs } from 'vue'
const state = reactive({
count: 0,
name: 'Vue',
isActive: true
})
// ✅ 正确：批量转为 ref 并解构
const { count, name, isActive } = toRefs(state)
// 修改需 .value
function increment() {
count.value++
}
- 解构后的
count是 ref，不是原始值，所以 JS 中读写必须用.value - 模板里可直接绑定
{{ count }}、v-model="name"，无需 .value
返回给模板的推荐写法
如果不想一个个解构，也可以直接返回 toRefs 包裹后的对象：
export default {
setup() {
const state = reactive({
message: 'Hello',
count: 1
})
// ✅ 模板能直接访问 message 和 count
return { ...toRefs(state) }
}
}
- 注意是
{ ...toRefs(state) }或toRefs(state)（Vue 会自动展开） - 返回的是普通对象（非 reactive），但每个属性都是 ref，模板仍可无感使用
注意事项
toRefs 只作用于顶层属性，不递归处理嵌套对象：
-
user: { name: 'Alice' }→user本身仍是 reactive，不是 ref - 若需深层解构，要对嵌套对象再调用
toRefs(user) - 如果只转换某一个属性，用
toRef(state, 'count')更精准
