摘要

ref() 適用於所有資料型別，reactive() 僅適用於物件型別。ref() 賦值更靈活，reactive() 操作屬性更直觀。團隊應建立一致的風格，普遍作法是「基本型別用 ref，物件陣列用 reactive」。

定義與說明

ref(value)

優點：

通用性強，可接受任何值。可以對整個 ref 物件進行重新賦值（myRef.value = ...）。

缺點：

在 script 中存取時，總要記得加上 .value，略顯繁瑣。

reactive(object)

優點：

操作代理物件的屬性時，語法和普通 JS 物件一樣，無需 .value。

缺點：

只能用於物件或陣列。不能直接對變數重新賦值，否則會失去響應性。對其屬性進行解構時，容易丟失響應性。

實作範例

Vue SFC

<script setup>
import { ref, reactive } from 'vue';

// --- 使用 ref 處理物件 ---
const userRef = ref({ name: 'Jake', age: 30 });
function changeUserRef() {
  // 必須透過 .value 存取
  userRef.value.age++;
}

// --- 使用 reactive 處理物件 ---
const userReactive = reactive({ name: 'Eason', age: 25 });
function changeUserReactive() {
  // 直接存取屬性
  userReactive.age++;
}
</script>

結論

ref 和 reactive 並非互斥，而是互補。選擇哪個取決於個人或團隊的程式碼風格偏好。一個常見的約定是：對於基本型別（字串、數字等）總是使用 ref；對於需要整體響應的物件和陣列，則使用 reactive。另一個風格是為了保持一致性，全部使用 ref。

ref reactive 選擇