深入理解 Vue 3 中的 ref、toRef 和 toRefs

582字
3分钟
2024-08-26
- Vue

在 Vue 3 的组合式 API 中，ref、toRef 和 toRefs 是非常重要的响应式工具。通过这些 API，你可以以更灵活的方式处理响应式数据，尤其是在需要细粒度控制响应式状态时。

什么是 `ref`？

ref 是 Vue 3 中用于创建响应式数据的 API。它可以包装任何类型的值，无论是基本类型还是对象类型。使用 ref 创建的响应式数据会返回一个带有 .value 属性的对象，我们通过 .value 访问或修改数据。

1
import { ref } from "vue";
2

3
const count = ref(0); // 创建一个响应式的基本类型
4
console.log(count.value); // 使用 .value 访问其值
5

6
count.value++; // 更新值时仍通过 .value

什么是 `toRef`？

toRef 用于将对象的某个属性转换为 ref，从而使这个属性变得响应式，同时避免将整个对象响应式化。这在处理复杂对象时非常有用，特别是当你只想对其中的某个属性进行单独操作时。

1
import { reactive, toRef } from "vue";
2

3
const state = reactive({ name: "Alice", age: 25 });
4
const nameRef = toRef(state, "name"); // 将对象中的某个属性转为 ref
5

6
console.log(nameRef.value); // 访问 name 属性
7
nameRef.value = "Bob"; // 更新 name 属性

什么是 `toRefs`？

toRefs 可以将整个对象的每个属性都转换为 ref，这使得我们在解构对象或在模板中单独使用其属性时，这些属性依然保持响应式。

1
import { reactive, toRefs } from "vue";
2

3
const state = reactive({ name: "Alice", age: 25 });
4
const { name, age } = toRefs(state); // 将对象中的所有属性转为 ref
5

6
console.log(name.value); // 访问 name 属性
7
name.value = "Bob"; // 更新 name 属性