Vue 3 组合式 API：揭秘 `ref` 和 `reactive` 的选择之惑

2023-03-31 12:00:26

Vue 3 组合式 API：ref 与 reactive 的区别

作为一名 Vue 开发者，你一定对 Vue 3 组合式 API 赞不绝口。它赋予我们强大的能力，帮助我们打造出更加灵活、可复用的组件。然而，在使用组合式 API 时，一个常见的难题是：究竟该用 ref 还是 reactive 来添加响应式状态？

什么是 ref 和 reactive？

ref 是一個內建函數，用於創建一個可變的引用值。它能追蹤一個變數的變化，並在變數改變時執行對應的動作。比如，我們可以用 ref 來創建一個計數器，透過 ref.value 來獲取或設定計數器的值。

const counter = ref(0);

// 獲取計數器的值
console.log(counter.value); // 0

// 設定計數器的值
counter.value++;

// 再次獲取計數器的值
console.log(counter.value); // 1

reactive 也是一個內建函數，用於創建一個響應式的物件。它能將一個普通的物件轉換為一個響應式物件。這意味著，當響應式物件中的任何一個屬性發生變化時，Vue 會自動更新畫面。

const person = reactive({
  name: 'John',
  age: 30
});

// 獲取人員的姓名
console.log(person.name); // 'John'

// 設定人員的姓名
person.name = 'Mary';

// 再次獲取人員的姓名
console.log(person.name); // 'Mary'

ref 和 reactive 的區別

了解了 ref 和 reactive 的基本概念後，我們來比較一下它們的異同。

特性	ref	reactive
回傳值	可變的引用值	響應式物件
作用	追蹤一個變數的變化	將一個普通物件轉換為一個響應式物件
適用情境	創建單一的響應式值	創建包含多個響應式屬性的物件

何時使用 ref 和 reactive？

一般來說，我們建議在以下場景中使用 ref：

當你需要追蹤一個變數的變化時。
當你需要在組件中創建單一的響應式值時。

我們建議在以下場景中使用 reactive：

當你需要創建包含多個響應式屬性的物件時。
當你需要將一個普通物件轉換為一個響應式物件時。

常見問題解答

我可以在同一組件中同時使用 ref 和 reactive 嗎？
答：可以，ref 和 reactive 是相互獨立的。
什麼時候應該使用 ref.value，什麼時候應該使用 reactive.value？
答：對於 ref，你需要使用 ref.value 來獲取或設定值。對於 reactive，你可以直接訪問屬性，無需使用 .value。
ref 和 reactive 是否會影響效能？
答：在少數情況下，reactive 可能會比 ref 效能較差。如果你遇到效能問題，可以嘗試使用 ref 代替。
Vuex 中的 state 是否是 reactive 的？
答：是的，Vuex 中的 state 是一個響應式物件。
我應該在 data() 方法中使用 ref 或 reactive 嗎？
答：通常不建議在 data() 方法中使用 ref 或 reactive。建議使用 setup() 方法來定義響應式狀態。