toRefs是解决Vue 3中对象解构响应式丢失的标准方案，它将reactive对象的每个属性转为ref，保持双向同步；因Proxy只代理整个对象，解构会脱离追踪，故需toRefs包裹后再解构。
直接用 toRefs 就能把 reactive 对象的每个属性转成独立的 ref，这样在解构或传给组合式函数时不会丢失响应性。
为什么需要 toRefs？
reactive 创建的对象是响应式的，但一旦你解构它（比如 const { count, name } = state），解构出来的变量就脱离了响应式系统，变成普通 JS 值。toRefs 的作用就是把 reactive 对象的每个属性包装成 ref，保持响应性。
基本用法：配合 reactive 使用
先创建一个 reactive 对象，再用 toRefs 包装：
import { reactive, toRefs } from 'vue'
const state = reactive({
count: 0,
name: 'Vue',
isActive: true
})
// 把 state 的每个属性转为 ref
const { count, name, isActive } = toRefs(state)
现在 count、name、isActive 都是 ref，可以安全解构、传递、在模板中使用（注意模板里要加 .value 或直接用，Vue 模板会自动解包）。
立即学习“前端免费学习笔记（深入）”；
在 setup 中返回给模板
常见写法是解构后用 return {...toRefs(state)}，让模板能直接访问：
export default {
setup() {
const state = reactive({
message: 'Hello',
count: 1
})
// ✅ 正确：保持响应性
return {
...toRefs(state)
}
}
}
模板中可以直接写 {{ message }} 和 {{ count }}，不用 .value —— Vue 会自动处理 ref 解包。
注意点和常见误区
-
toRefs 只处理顶层属性：嵌套对象（如
user: { name: 'Alice' }）里的user本身还是 reactive，不是 ref；若需深层响应，得手动对嵌套对象再调用toRefs或改用ref+unref等方式 -
修改 ref 属性要赋值 .value：比如
count.value++，但模板中不用写 .value - toRefs 不适用于普通对象：必须是对 reactive 创建的对象调用，对 plain object 或 ref 调用会无效或报错
