Vue如何創(chuàng)建響應(yīng)式數(shù)據(jù)對(duì)象

這篇文章主要介紹了Vue如何創(chuàng)建響應(yīng)式數(shù)據(jù)對(duì)象的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue如何創(chuàng)建響應(yīng)式數(shù)據(jù)對(duì)象文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

一、reactive

reactive方法根據(jù)傳入的對(duì)象，創(chuàng)建返回一個(gè)深度響應(yīng)式對(duì)象（Proxy代理對(duì)象）。

reactive 會(huì)對(duì)傳入對(duì)象進(jìn)行包裹，創(chuàng)建一個(gè)該對(duì)象的
Proxy代理對(duì)象。它是源對(duì)象的響應(yīng)式副本，不等于原始對(duì)象。它==“深層”==轉(zhuǎn)換了源對(duì)象的所有嵌套property（屬性）
，解包并維持其中的任何ref引用關(guān)系。

響應(yīng)式對(duì)象屬性值改動(dòng)，不管層級(jí)有多深，都會(huì)觸發(fā)響應(yīng)式。新增和刪除屬性也會(huì)觸發(fā)響應(yīng)式。

二、ref

ref 函數(shù)用來(lái)將一項(xiàng)數(shù)據(jù)包裝成一個(gè)響應(yīng)式 ref 對(duì)象。它接收任意數(shù)據(jù)類型的參數(shù)，作為這個(gè) ref 對(duì)象 內(nèi)部的 value property 的值。

• 生成值類型數(shù)據(jù)（String，Number，Boolean，Symbol）的響應(yīng)式對(duì)象

• 可以用ref對(duì)象.value訪問(wèn)或更改這個(gè)值。

• 生成對(duì)象和數(shù)組類型的響應(yīng)式對(duì)象 （對(duì)象和數(shù)組一般不選用ref方式，而選用reactive方式，比較便捷）

三、reactive對(duì)比ref

• 從定義數(shù)據(jù)角度對(duì)比：

• ref用來(lái)定義：任意數(shù)據(jù)類型

• reactive用來(lái)定義：對(duì)象（或數(shù)組）類型數(shù)據(jù)

如何選擇 ref 和 reactive？建議：

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

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

• 從原理角度對(duì)比：

• ref通過(guò)Object.defineProperty()的get和set來(lái)實(shí)現(xiàn)響應(yīng)式（數(shù)據(jù)劫持）。

• reactive通過(guò)使用Proxy來(lái)實(shí)現(xiàn)響應(yīng)式（數(shù)據(jù)劫持），并通過(guò)Reflect操作源對(duì)象內(nèi)部的數(shù)據(jù)

• 從使用角度對(duì)比：

• ref定義的數(shù)據(jù)：訪問(wèn)或更改數(shù)據(jù)需要.value

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

四、toRef

• 針對(duì)一個(gè)響應(yīng)式對(duì)象（reactive封裝）的prop（屬性）創(chuàng)建一個(gè)ref，且保持響應(yīng)式

• 兩者保持引用關(guān)系

語(yǔ)法：const 屬性名= toRef(對(duì)象,'屬性名')

五、toRefs

toRefs 是一種用于破壞響應(yīng)式對(duì)象并將其所有屬性轉(zhuǎn)換為 ref 的實(shí)用方法

• 將響應(yīng)式對(duì)象（reactive封裝）轉(zhuǎn)成普通對(duì)象

• 對(duì)象的每個(gè)屬性(Prop)都是對(duì)應(yīng)的ref

• 兩者保持引用關(guān)系

語(yǔ)法：const 屬性名= toRefs(對(duì)象,'屬性名')

注意：reactive封裝的響應(yīng)式對(duì)象，不要直接通過(guò)解構(gòu)的方式return，這是不具有響應(yīng)式的。

可以通過(guò) toRefs 處理，然后再解構(gòu)返回，這樣才具有響應(yīng)式

const state = reactive({ 
		age: 20,
      	name: 'zhangsan'});
return {...state}; // 錯(cuò)誤的方式，會(huì)丟失響應(yīng)式
return toRefs(state); // 正確的方式
//最佳方式
return ...toRefs(state)//將對(duì)象的各個(gè)屬性的ref解構(gòu)到對(duì)象根下面。

六、一些問(wèn)題

為什么有了reactive函數(shù)還需要ref函數(shù)呢？

當(dāng)我們只想讓某個(gè)變量實(shí)現(xiàn)響應(yīng)式的時(shí)候，采用reactive就會(huì)比較麻煩，因此vue3提供了ref方法進(jìn)行簡(jiǎn)單值的監(jiān)聽(tīng)，但并不是說(shuō)ref只能傳入簡(jiǎn)單值，他的底層是reactive，所以reactive有的，它都有。

記?。簉ef本質(zhì)也是reactive，ref(obj)等價(jià)于reactive({value: obj})

關(guān)于“Vue如何創(chuàng)建響應(yīng)式數(shù)據(jù)對(duì)象”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue如何創(chuàng)建響應(yīng)式數(shù)據(jù)對(duì)象”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。