深入理解 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 屬性