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

import { ref,reactive } from 'vue'

1.ref

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

使用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)式對(duì)象呢？

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

2.reactive

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

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

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

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

兩者區(qū)別：

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

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

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

3.使用ref可以修改整個(gè)對(duì)象實(shí)例，而使用reactive不可以

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

使用ref時(shí)，頁面上面會(huì)有很多的  .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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論