這篇文章主要介紹了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ì)有所收獲，下面我們一起來看看吧。

興業(yè)ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

一、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ù)用來將一項(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訪問或更改這個(gè)值。

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

三、reactive對(duì)比ref

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

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

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

如何選擇 ref 和 reactive？建議：

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

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

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

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

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

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

• ref定義的數(shù)據(jù)：訪問或更改數(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)系

語法：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)系

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

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

可以通過 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ì)象根下面。

六、一些問題

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

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

記住：ref本質(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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁標(biāo)題：Vue如何創(chuàng)建響應(yīng)式數(shù)據(jù)對(duì)象
URL標(biāo)題：http://jinyejixie.com/article4/ggsiie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、外貿(mào)建站、動(dòng)態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)