reactive
方法根據傳入的對象,建立傳回一個深度響應式物件(Proxy代理物件)。
reactive
會對傳入物件進行包裹,建立一個該物件的Proxy代理物件
。它是來源物件的響應式副本,不等於原始物件。它==“深層”==轉換了所有源物件的嵌套property(屬性)
,解包並維持其中的任何ref引用關係。
響應式物件屬性值改動,不管層級有多深,都會觸發響應式。新增和刪除屬性也會觸發響應式。
ref
函數用來將一項資料包裝成一個響應式 ref 物件。它接收任意資料型別的參數,作為這個 ref 物件 內部的 value property
的值。
產生值類型資料(String
#,Number
,Boolean
,Symbol
)的響應式物件
可以用ref物件.value
存取或更改這個值。
產生物件與陣列型別的回應式物件(物件與陣列一般不選用ref方式,而選用reactive方式,比較便捷)
從定義資料角度比較:
任意資料型別
物件(或陣列)類型資料
如何選擇ref 和reactive?建議:
- 基礎型別值(String,Number,Boolean,Symbol) 或單值物件(類似{ count: 1 }這樣只有一個屬性值的物件) 使用ref
- 引用型別值(Object、Array)使用reactive
Object.defineProperty()的
get和
set#來實作回應式(資料劫持)。
Proxy來實現響應式(資料劫持),並透過
Reflect操作
來源物件內部的資料
。
const 屬性名稱= toRef(物件,'屬性名稱')
所有屬性轉換為ref 的實用方法
const 屬性名稱= toRefs(物件,'屬性名稱')
注意:reactive封裝的響應式對象,不要直接透過解構的方式return,這是不具有響應式的。
const state = reactive({ age: 20, name: 'zhangsan'}); return {...state}; // 错误的方式,会丢失响应式 return toRefs(state); // 正确的方式 //最佳方式 return ...toRefs(state)//将对象的各个属性的ref解构到对象根下面。
為什麼有了reactive函數還需要ref函數呢?當我們只想讓某個變數實現響應式的時候,採用reactive就會比較麻煩,因此vue3提供了ref方法進行簡單值的監聽,但並不是說ref只能傳進入簡單值,他的底層是reactive,所以reactive有的,它都有。
記得:ref本質也是reactive,ref(obj)等價於reactive({value: obj})
vue.js影片教學】
以上是總結Vue建立響應式資料物件(reactive、ref、toRef、toRefs)的詳細內容。更多資訊請關注PHP中文網其他相關文章!