---
# System prepended metadata

title: '[學習筆記] ref、reactive、shallowRef、shallowReactive的差別'

---

# [學習筆記] ref、reactive、shallowRef、shallowReactive的差別

### ref 的實現
1. ref 實現響應式(基本類型)也是採用 Object.definedProperty() 來實現的 getting 和 setting。
2. ref 實作響應式(物件類型)也是採用 Proxy 來實作（底層呼叫 reactive 方法）。

### reactive 的實現
1. reactive 是採用 Proxy 來實作，只能對引用型別生效，如物件數組。
2. 數組非同步賦值問題會導致響應式失效，可以透過 push 方法改變資料，或將陣列包裹在物件中。

### ref 和 reactive 的區別
1. ref 支援所有類型，reactive 只支援參考類型。
2. ref 取值都需要加.value（模板裡是不需要加 .value 的） , 而 reactive 不需要加。

### ref 和 shallowRef 的差異（shallowReactive同理）
1. ref 是深層的響應式。
2. shallowRef 是淺層的響應式（只有第一層資料是響應式），只能監聽到 .value 就結束了。 
3. 或手動呼叫 triggerRef() 觸發視圖更新 ref和shallowref 不能一起寫 不然會造成 shallowref 的更新（因為 triggerRef() 方法的影響）。

### ref 和 Ref 的差別
1. Ref 是 TS 對應的接口，申明類型的時候使用。

### toRaw 和 markRaw
1. toRaw 會脫去 Proxy 的外衣，使其失去響應式。
2. 為響應式物件新增屬性，markRaw 可以為響應式物件新增非響應式的新屬性。

### readonly 和 shallowReadonly
1. readonly 所有層級的屬性都不允許修改
2. shallowReadonly 只有第一層級的屬性不允許修改

### 判斷響應式數據
=> isRef, isReactive, isReadonly, isProxy