Vue如何創建響應式數據對象

這篇文章主要介紹了Vue如何創建響應式數據對象的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue如何創建響應式數據對象文章都會有所收獲，下面我們一起來看看吧。

一、reactive

reactive方法根據傳入的對象，創建返回一個深度響應式對象（Proxy代理對象）。

reactive 會對傳入對象進行包裹，創建一個該對象的
Proxy代理對象。它是源對象的響應式副本，不等于原始對象。它==“深層”==轉換了源對象的所有嵌套property（屬性）
，解包并維持其中的任何ref引用關系。

響應式對象屬性值改動，不管層級有多深，都會觸發響應式。新增和刪除屬性也會觸發響應式。

二、ref

ref 函數用來將一項數據包裝成一個響應式 ref 對象。它接收任意數據類型的參數，作為這個 ref 對象 內部的 value property 的值。

• 生成值類型數據（String，Number，Boolean，Symbol）的響應式對象

• 可以用ref對象.value訪問或更改這個值。

• 生成對象和數組類型的響應式對象 （對象和數組一般不選用ref方式，而選用reactive方式，比較便捷）

三、reactive對比ref

• 從定義數據角度對比：

• ref用來定義：任意數據類型

• reactive用來定義：對象（或數組）類型數據

如何選擇 ref 和 reactive？建議：

• 基礎類型值(String，Number，Boolean，Symbol) 或單值對象(類似{ count: 1 }這樣只有一個屬性值的對象) 使用 ref

• 引用類型值(Object、Array)使用 reactive

• 從原理角度對比：

• ref通過Object.defineProperty()的get和set來實現響應式（數據劫持）。

• reactive通過使用Proxy來實現響應式（數據劫持），并通過Reflect操作源對象內部的數據

• 從使用角度對比：

• ref定義的數據：訪問或更改數據需要.value

• reactive定義的數據：操作數據與讀取數據均不需要.value。

四、toRef

• 針對一個響應式對象（reactive封裝）的prop（屬性）創建一個ref，且保持響應式

• 兩者保持引用關系

語法：const 屬性名= toRef(對象,'屬性名')

五、toRefs

toRefs 是一種用于破壞響應式對象并將其所有屬性轉換為 ref 的實用方法

• 將響應式對象（reactive封裝）轉成普通對象

• 對象的每個屬性(Prop)都是對應的ref

• 兩者保持引用關系

語法：const 屬性名= toRefs(對象,'屬性名')

注意：reactive封裝的響應式對象，不要直接通過解構的方式return，這是不具有響應式的。

可以通過 toRefs 處理，然后再解構返回，這樣才具有響應式

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如何創建響應式數據對象”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue如何創建響應式數據對象”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。