vue3中的ref、reactive問題解析
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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于Vue3+ts封裝一個(gè)簡(jiǎn)單版的Message組件
近日項(xiàng)目中需要使用信息提示框的功能,ui組件庫使用的是字節(jié)的arco-design-vue,看了一下,現(xiàn)有的Message不滿足要是需求,直接使用message組件的話,改樣式太麻煩,所以本文就本就介紹了基于Vue3+ts封裝一個(gè)簡(jiǎn)單版的Message組件,需要的朋友可以參考下2023-09-09
Vue3計(jì)算屬性computed和監(jiān)聽屬性watch區(qū)別解析
計(jì)算屬性適用于對(duì)已有的數(shù)據(jù)進(jìn)行計(jì)算,派生新的數(shù)據(jù),并在模板中使用；而監(jiān)聽屬性適用于監(jiān)聽數(shù)據(jù)的變化,并執(zhí)行一些特定的操作,根據(jù)具體的需求和場(chǎng)景,選擇適合的機(jī)制這篇文章主要介紹了Vue3計(jì)算屬性computed和監(jiān)聽屬性watch,需要的朋友可以參考下2024-02-02
本篇文章主要介紹了Vue中如何實(shí)現(xiàn)輪播圖的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
vue多頁面項(xiàng)目中路由使用history模式的方法
這篇文章主要介紹了vue多頁面項(xiàng)目中路由如何使用history模式，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
Vue3響應(yīng)式高階用法之shallowReadonly()使用
在前端開發(fā)中,Vue3的shallowReadonly() API允許開發(fā)者創(chuàng)建部分只讀的狀態(tài),這對(duì)于保持頂層屬性不變而內(nèi)部屬性可變的場(chǎng)景非常有用,本文將詳細(xì)介紹?shallowReadonly()?的使用方法及其應(yīng)用場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下2024-09-09
本文給大家分享了VUE制作點(diǎn)擊按鈕出現(xiàn)水波紋效果的組件過程，對(duì)此有需求的朋友可以跟著學(xué)習(xí)下。2018-04-04
Vue中activated和deactivated生命周期鉤子在keep-alive組件中的使用詳解
Vue中keep-alive的activated和deactivated鉤子用于管理緩存組件的激活與停用狀態(tài),提升性能,created初始化數(shù)據(jù),mounted操作DOM,其他常用鉤子包括beforeCreate、beforeMount、beforeUpdate、updated、beforeUnmount和unmounted2025-07-07
vue3自定義確認(rèn)密碼匹配驗(yàn)證規(guī)則的操作代碼
這篇文章主要介紹了vue3自定義確認(rèn)密碼匹配驗(yàn)證規(guī)則的操作代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vite+vue3項(xiàng)目啟動(dòng)報(bào)錯(cuò)Unexpected?“%“問題及解決
這篇文章主要介紹了vite+vue3項(xiàng)目啟動(dòng)報(bào)錯(cuò)Unexpected?“%“問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue.js開發(fā)實(shí)現(xiàn)全局調(diào)用的MessageBox組件實(shí)例代碼
最近學(xué)習(xí)了Vue.js，感覺組件這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以決定記錄下，下面這篇文章主要給大家介紹了關(guān)于利用vue.js開發(fā)實(shí)現(xiàn)全局調(diào)用的MessageBox組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-11-11