# [學習筆記] 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
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up