`toRef` 和 `toRefs` 的作用是什么？解决了什么问题？

1. toRef

• 修改 ref 的值，源对象的属性也会变。
• 修改源对象的属性，ref 的值也会变。

1const singleRef = toRef(sourceObject, 'keyName')
2// 或者传入一个 getter 函数 (Vue 3.3+)
3const singleRef = toRef(() => sourceObject.keyName)

1. 解构丢失响应性： 当你直接从一个响应式对象（如 reactive 对象）中解构属性时（const { name } = state），name 只是一个普通变量，失去了响应性。toRef 可以确保解构出来的单个属性依然保持响应式连接。
2. 传递单个属性给函数： 当你需要将响应式对象的某个特定属性传递给一个函数（例如 composable 函数），并希望该函数内部能响应外部变化或修改外部数据时，使用 toRef 是最安全的方式。

2. toRefs

1const refsObject = toRefs(sourceObject)

1. 安全地解构整个响应式对象： 这是 toRefs 最核心的用途。如果你想把一个 reactive 对象的所有属性都解构出来，并且希望它们都保持响应性，直接解构会失效。使用 toRefs 转换后，再进行解构，就能保证所有属性都与源对象保持同步。
   javascript

   编辑

   1const state = reactive({ foo: 1, bar: 2 })
   2
   3// ❌ 错误做法：丢失响应性
   4// const { foo, bar } = state 
   5
   6// ✅ 正确做法：保持响应性
   7const { foo, bar } = toRefs(state)

2. 在 setup 函数返回值中展开对象： 当你在组件的 setup() 函数中返回一个 reactive 对象供模板使用时，模板可以直接访问。但如果你想在 setup 内部逻辑中解构它，或者想返回一个扁平的对象结构而不是嵌套的 reactive 对象，toRefs 非常有用。

核心区别与对比

代码示例

1import { reactive, toRef, toRefs, ref } from 'vue'
2
3const user = reactive({
4  name: 'Alice',
5  age: 25
6})
7
8// --- 使用 toRef ---
9// 创建一个指向 user.name 的 ref
10const nameRef = toRef(user, 'name')
11
12console.log(nameRef.value) // "Alice"
13nameRef.value = 'Bob'
14console.log(user.name)     // "Bob" (源对象也被修改了)
15
16// --- 使用 toRefs ---
17// 将 user 的所有属性转换为 ref
18const userRefs = toRefs(user)
19// 现在可以安全解构
20const { name, age } = userRefs
21
22console.log(name.value) // "Bob"
23age.value = 26
24console.log(user.age)   // 26 (源对象也被修改了)

总结：解决了什么痛点？

• 痛点： const { count } = reactiveState 导致 count 变成死数据，界面不更新。
• 解决方案：
  • 如果只要一个属性，用 toRef(state, 'count')。
  • 如果要全部解构，用 const { count } = toRefs(state)。