在 Vue 3 中，ref、toRef 和 toRefs 是与响应式系统相关的 API，它们用于处理响应式数据，但各自有不同的用途和场景：
1. ref
- 定义：
ref用于创建一个响应式的引用对象。它可以是基本类型或对象类型。 - 用法：当你需要将一个值（如字符串、数字、对象等）转换为响应式数据时使用。
- 返回值：返回一个包含
.value属性的对象，通过该属性访问和修改其值。
import { ref } from "vue";
const count = ref(0); // 创建响应式的引用
count.value++; // 修改值
2. toRef
- 定义：
toRef用于将响应式对象中的某个属性转换为一个响应式引用。它适用于在 setup 函数中解构响应式对象时，保持响应性。 - 用法：当你需要从一个响应式对象中提取一个属性，并希望这个属性依然是响应式的时使用。
- 返回值：返回一个响应式引用对象。
import { ref, reactive, toRef } from "vue";
const state = reactive({ count: 0 });
const countRef = toRef(state, "count"); // 转换为响应式引用
countRef.value++; // 修改值
3. toRefs
- 定义：
toRefs用于将一个响应式对象的所有属性转换为响应式引用，返回一个新对象。 - 用法：适用于将整个响应式对象解构为单独的响应式引用，保持各属性的响应性。
- 返回值：返回一个新对象，其中每个属性都是响应式引用。
import { reactive, toRefs } from "vue";
const state = reactive({ count: 0, name: "Vue" });
const { count, name } = toRefs(state); // 解构为响应式引用
count.value++; // 修改 count