它是什么？

toRefs 把reactive 对象变成能解构的响应式对象。解构出来的每个属性都是 ref

解决了什么问题？

直接解构 reactive 对象会丢失响应式：

const state = reactive({ name: '张三', age: 25 })

// ❌ 直接解构 - 响应式丢失
const { name, age } = state
state.name = '李四' // name 不会变！

// ✅ 使用 toRefs - 保持响应式
const { name, age } = toRefs(state)
state.name = '李四' // name.value 同步更新！

核心用法

在 setup 函数中

import { reactive, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: '张三',
      age: 25
    })
    
    return {
      ...toRefs(state) // 模板中可以直接用 {{name}} {{age}}
    }
  }
}

在组合式函数中

function useCounter() {
  const state = reactive({
    count: 0,
    double: computed(() => state.count * 2)
  })
  
  return {
    ...toRefs(state), // 使用者可以安全解构
    increment: () => state.count++
  }
}

// 使用
const { count, double, increment } = useCounter()

重要特性

1. 保持连接：修改 ref 或原对象，两边都会同步更新
2. 模板自动解包：模板里直接用 {{name}}，不需要 .value
3. JS 中需要 .value：在 JavaScript 代码里要写 name.value

使用场景

1. 从 setup 返回数据给模板用
2. 组合式函数返回多个响应式数据
3. 需要解构 reactive 对象但不想丢响应式

一句话：想解构 reactive 对象又不丢响应式，就用 toRefs。