Vue3中reactive變量重新賦值無法響應的3種處理方法
更新時間：2023年08月04日 10:43:13 作者：敦厚的曹操
這篇文章主要給大家介紹了關于Vue3中reactive變量重新賦值無法響應的3種處理方法,在Vue3中可以使用reactive函數(shù)將一個普通對象轉(zhuǎn)換為響應式對象,需要的朋友可以參考下
第一種解決方案：變量值包裹對象，加一個{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é)
到此這篇關于Vue3中reactive變量重新賦值無法響應的3種處理方法的文章就介紹到這了,更多相關Vue3 reactive變量重新賦值無法響應內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue-cli中實現(xiàn)響應式布局的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要介紹了vue刷新后瞬間閃爍,無法解析的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了Vue -- webpack 項目自動打包壓縮成zip文件的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實例
今天小編就為大家分享一篇vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue 動態(tài)組件與 v-once 指令的實現(xiàn)
這篇文章主要介紹了Vue 動態(tài)組件與 v-once 指令的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
這篇文章主要為大家詳細介紹了vue+jsplumb實現(xiàn)連線繪圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue-router相關基礎知識及單頁面應用的工作原理,需要的朋友可以參考下2018-03-03
詳解Vue路由History mode模式中頁面無法渲染的原因及解決
這篇文章主要介紹了詳解Vue路由History mode模式中頁面無法渲染的原因及解決，非常具有實用價值，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了淺談vue中$event理解和框架中在包含默認值外傳參，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
在組件中時?？吹紷click.native,在項目中遇到后,簡單介紹下,這篇文章主要給大家介紹了關于Vue中@click.native的使用方法及場景的相關資料,需要的朋友可以參考下2023-11-11