ref 和 reactive

一、差異

特性	ref	reactive
適用類型	任意類型（包括基本類型）	僅對象/數組
訪問對象	需要通過 .value	直接訪問屬性
整體替換	?支持（直接賦值）	?不支持（需要特殊處理）
解構保持相應性	?需要配合 toRef	?需要配合 toRef
性能開銷	較低（僅包裝一層）	較高（深度代理）

二、能否替代的場景分析

（1）基本類型數據

// ? 必須用 ref
const count = ref(0); // 正確
const count = reactive(0); // ? 錯誤（reactive 只能處理對象）

（2）對象類型數據

// ? 可以用 reactive 替代 ref
const objRef = ref({ a: 1 });
const objReactive = reactive({ a: 1 });// 訪問方式差異
console.log(objRef.value.a); // ref 需要 .value
console.log(objReactive.a);  // reactive 直接訪問

（3）數組類型數據

// ? 可以用 reactive 替代 ref
const arrRef = ref([1, 2, 3]);
const arrReactive = reactive([1, 2, 3]);// 修改操作差異
arrRef.value.push(4);   // ref 需要 .value
arrReactive.push(4);    // reactive 直接操作

（4） 需要整體替換的場景

// ? 必須用 ref
const state = ref({ a: 1 });
state.value = { a: 2 }; // ? 正確// ? reactive 無法直接替換
const state = reactive({ a: 1 });
state = { a: 2 }; // ? 錯誤（失去響應性） 

三、替代方案與兼容寫法

1. 用 reactive 模擬 ref

// 通過 reactive 包裝單屬性對象
const count = reactive({ value: 0 });
console.log(count.value); // 訪問方式與 ref 一致

2. 用 ref 模擬 reactive

// 通過 ref 包裝對象
const obj = ref({ a: 1 });
console.log(obj.value.a); // 訪問時需要 .value

四、最佳實踐建議

1. 基本類型 → 必須用 ref
2. 對象/數組 → 優先用 reactive（除非需要整體替換）
3. 復雜數據結構 → 混合使用：

const state = reactive({count: ref(0),       // 嵌套 refuser: reactive({     // 嵌套 reactivename: 'Alice'})
});

4. 模板中使用 → 優先用 reactive（避免頻繁 .value）

五、性能對比

操作	ref	reactive
創建響應式對象	?快	??慢
屬性訪問	???快	??快
數組修改	??中	???快
整體替換	???快	?不支持

六 結論：

不能簡單用 reactive 完全替代 ref，但可以根據數據類型和使用場景選擇：

• 基本類型 → 必須用 ref
• 對象/數組 → 優先用 reactive
• 需要整體替換 → 必須用 ref
• 模板中直接訪問 → 優先用 reactive（減少 .value 噪音）