Vue3中reactive變量重新賦值無法響應(yīng)的3種處理方法
更新時(shí)間：2023年08月04日 10:43:13 作者：敦厚的曹操
這篇文章主要給大家介紹了關(guān)于Vue3中reactive變量重新賦值無法響應(yīng)的3種處理方法,在Vue3中可以使用reactive函數(shù)將一個(gè)普通對(duì)象轉(zhuǎn)換為響應(yīng)式對(duì)象,需要的朋友可以參考下
第一種解決方案：變量值包裹對(duì)象，加一個(gè){data:變量值}
1、html
<div>a=【{{a.data}}】</div>
<div>-----------------</div>
<div>【{{ b.data[0] }}】</div>
<div>【{{ b.data[1] }}】</div>
<div>【{{ b.data[2] }}】</div>2、定義reactive變量
let a=reactive({data:"110"});
let b=reactive({data:[0,1,2]});3、重新賦值
a.data="119";
b.data=[...[9,8,7]];第二種解決方案：ref
1、html
<div>a=【{{a}}】</div>
<div>-----------------</div>
<div>【{{ b[0] }}】</div>
<div>【{{ b[1] }}】</div>
<div>【{{ b[2] }}】</div>2、定義ref變量
let a=ref("110");
let b=ref([0,1,2]);3、賦值
a.value="119";
b.value=[...[9,8,7]];第三種方案：push（不推薦）
總結(jié)
到此這篇關(guān)于Vue3中reactive變量重新賦值無法響應(yīng)的3種處理方法的文章就介紹到這了,更多相關(guān)Vue3 reactive變量重新賦值無法響應(yīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
keep-alive include和exclude無效問題及解決
這篇文章主要介紹了keep-alive include和exclude無效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
使用v-bind：class或者v-bind:style或者直接通過操作dom來對(duì)其樣式進(jìn)行更改；接下來通過本文給大家分享Vue.js中對(duì)css的操作（修改）具體方式，感興趣的朋友跟隨小編一起看看吧2018-10-10
淺析vue偵測(cè)數(shù)據(jù)的變化之基本實(shí)現(xiàn)
這里涉及到Vue一個(gè)重要特性：響應(yīng)式系統(tǒng)。數(shù)據(jù)模型只是普通的 JavaScript對(duì)象，當(dāng)我們修改時(shí)，視圖會(huì)被更新，而變化偵測(cè)是響應(yīng)式系統(tǒng)的核心2021-06-06
這篇文章主要介紹了vue3如何在父組件修改子組件的值實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-08-08
本篇文章主要介紹了Vue2.0 多 Tab切換組件的封裝實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
vue項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)到新頁面,返回舊頁面,保留之前的數(shù)據(jù)記錄(操作代碼)
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)到新頁面，返回舊頁面，保留之前的數(shù)據(jù)記錄,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
Vue+ElementUI?封裝簡(jiǎn)易PaginationSelect組件的詳細(xì)步驟
這篇文章主要介紹了Vue+ElementUI?封裝簡(jiǎn)易PaginationSelect組件,這里簡(jiǎn)單介紹封裝的一個(gè)Pagination-Select組件幾個(gè)步驟，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
Vue.js 2.0學(xué)習(xí)教程之從基礎(chǔ)到組件詳解
這篇文章主要介紹了Vue.js 2.0從基礎(chǔ)到組件的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考價(jià)值，需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。2017-04-04
vue實(shí)現(xiàn)全選組件封裝實(shí)例詳解
這篇文章主要介紹了vue?全選組件封裝,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-02-02
在UniApp中實(shí)現(xiàn)App與H5頁面的跳轉(zhuǎn)及通信的代碼示例
在移動(dòng)應(yīng)用開發(fā)中,內(nèi)嵌 H5 頁面或與外部網(wǎng)頁交互是常見需求,UniApp 作為跨平臺(tái)框架,提供了靈活的方式實(shí)現(xiàn) App 與 H5 的跳轉(zhuǎn)和雙向通信,本文將詳細(xì)講解實(shí)現(xiàn)方法,并提供可直接復(fù)用的代碼示例,需要的朋友可以參考下2025-04-04