在 Vue 3 中，toRefs 和 toRef 是两个实用函数，用于从响应式对象中提取响应式引用。这两个函数在功能上有些相似，但它们的使用场景和返回值有所不同。
toRefs
toRefs 函数用于将一个响应式对象拆分成多个响应式引用。它接收一个响应式对象作为参数，并返回一个对象，其中每个属性都是原对象中相应属性的响应式引用。
用途
- 拆分响应式对象：当你需要将一个响应式对象拆分成多个独立的响应式引用时。
- 避免引用整个对象：当你只想在模板或计算属性中引用对象的一部分时。
示例
import { reactive, toRefs } from 'vue';
const state = reactive({ count: 0, name: 'Alice' });
const { count, name } = toRefs(state);
// count 和 name 现在是独立的响应式引用
count.value = 10; // 修改 count 的值
console.log(name.value); // 输出 Alice
toRef
toRef 函数用于从响应式对象中创建一个独立的响应式引用。它接收一个响应式对象和一个属性名作为参数，并返回一个响应式引用，该引用指向原对象的指定属性。
用途
- 提取单个响应式引用：当你只需要从响应式对象中提取一个属性作为响应式引用时。
- 传递给其他组件：当你需要将一个响应式属性传递给另一个组件或函数时。
示例
import { reactive, toRef } from 'vue';
const state = reactive({ count: 0, name: 'Alice' });
const countRef = toRef(state, 'count');
// countRef 是 count 属性的响应式引用
countRef.value = 10; // 修改 count 的值
console.log(state.name); // 输出 Alice
比较
toRefs：返回一个包含多个响应式引用的对象。toRef：返回一个特定属性的响应式引用。
何时使用
- 当你需要将一个响应式对象拆分成多个响应式引用时，使用
toRefs。 - 当你只需要从响应式对象中提取一个属性作为响应式引用时，使用
toRef。
总结
toRefs 和 toRef 都是用来处理响应式对象的实用函数。toRefs 用于将一个响应式对象拆分成多个响应式引用，而 toRef 用于从响应式对象中提取单个响应式引用。根据你的具体需求选择合适的函数来处理响应式对象。
