ref 和 reactive都是vue3推出的針對組合式設(shè)計的聲明響應(yīng)式狀態(tài)的API，兩者在使用之前都要先進(jìn)行引入

import { ref,reactive } from 'vue'

1.ref

ref用于將一個普通類型的數(shù)據(jù)轉(zhuǎn)成響應(yīng)式對象

使用ref進(jìn)行創(chuàng)建的響應(yīng)式數(shù)據(jù)在模板中可以直接使用，但是在<script></script>標(biāo)簽中使用需要加上（ .value）進(jìn)行獲取數(shù)據(jù)

直接打印ref響應(yīng)式數(shù)據(jù)，數(shù)據(jù)如下：

既然使用ref那么復(fù)雜，為什么還要使用ref進(jìn)行創(chuàng)建響應(yīng)式對象呢？

官網(wǎng)給出的解釋是：當(dāng)你在組件中使用了ref進(jìn)行創(chuàng)建一個響應(yīng)式對象，當(dāng)數(shù)據(jù)變化是，系統(tǒng)會自動追蹤到數(shù)據(jù)的變換，從而進(jìn)行相應(yīng)的DOM進(jìn)行渲染。另一個好處是，使用ref進(jìn)行創(chuàng)建的響應(yīng)式數(shù)據(jù)和普通數(shù)據(jù)相比，可以將ref傳遞給函數(shù)，這樣可以保留對最新值和響應(yīng)式的訪問。

2.reactive

reactive用于將一個普通的對象裝成一個響應(yīng)式數(shù)據(jù)

reactive在vue中的使用如圖所示：

打印reactive的創(chuàng)建的響應(yīng)式數(shù)據(jù)

通過打印的數(shù)據(jù)對比發(fā)現(xiàn)，reactive 創(chuàng)建的響應(yīng)式數(shù)據(jù)是一個響應(yīng)式的Proxy對象

兩者區(qū)別：

1.reactive 的參數(shù)一般是對象或者數(shù)組，是深層次的，能夠?qū)?fù)雜的數(shù)據(jù)類型變?yōu)轫憫?yīng)式數(shù)據(jù)；

2.ref 的參數(shù)可以是基本數(shù)據(jù)類型，也可以是對象，或者數(shù)組

注：ref的參數(shù)是對象時，其實本質(zhì)還是基于reactive進(jìn)行轉(zhuǎn)成響應(yīng)式數(shù)據(jù)，系統(tǒng)會自動添加一個屬性  value

3.使用ref可以修改整個對象實例，而使用reactive不可以

4.兩者都是基于Proxy進(jìn)行實現(xiàn)的，因為vue3的響應(yīng)式原理就是基于Proxy 

使用ref時，頁面上面會有很多的  .value ,好處是reactive能做的事情ref基本上都可以，而ref能做的reactive不一定可以做。但是也不推薦盲目的使用ref進(jìn)行創(chuàng)建響應(yīng)式數(shù)據(jù)

到此這篇關(guān)于vue3中的ref、reactive的文章就介紹到這了,更多相關(guān)vue3 ref、reactive內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論