Vue3：详解toRefs
它是什么？
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()
重要特性
- 保持连接：修改 ref 或原对象，两边都会同步更新
- 模板自动解包：模板里直接用
{{name}}，不需要.value - JS 中需要 .value：在 JavaScript 代码里要写
name.value
使用场景
- 从 setup 返回数据给模板用
- 组合式函数返回多个响应式数据
- 需要解构 reactive 对象但不想丢响应式
一句话：想解构 reactive 对象又不丢响应式，就用 toRefs。