Vue3中reactive變量重新賦值無法響應(yīng)的3種處理方法
更新時間：2023年08月04日 10:43:13 作者：敦厚的曹操
這篇文章主要給大家介紹了關(guān)于Vue3中reactive變量重新賦值無法響應(yīng)的3種處理方法,在Vue3中可以使用reactive函數(shù)將一個普通對象轉(zhuǎn)換為響應(yīng)式對象,需要的朋友可以參考下
第一種解決方案：變量值包裹對象，加一個{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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue環(huán)境搭建簡單教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
Vue中對比scoped css和css module的區(qū)別
這篇文章主要介紹了Vue中scoped css和css module的區(qū)別對比，scoped css可以直接在能跑起來的vue項目中使用而css module需要增加css-loader配置才能生效。具體內(nèi)容詳情大家參考下本文2018-05-05
Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值)
這篇文章主要介紹了Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單的發(fā)表評論功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue雙向數(shù)據(jù)綁定指令v-model的用法
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定指令v-model的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時,攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue路由傳參的三種方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
詳解如何在Vue2中實現(xiàn)useDraggable
這篇文章主要為大家詳細介紹了Vue2中實現(xiàn)useDraggable的相關(guān)知識,文中的示例代碼簡潔易懂,對我們深入了解vue有一定的幫助,需要的小伙伴可以參考下2023-12-12
vxe-table中vxe-grid中的合并單元格方式(合并行、列)
這篇文章主要介紹了vxe-table中vxe-grid中的合并單元格方式(合并行、列),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
最近在研究Vue的組件庫,之前也用過$attrs和$listeners,官方文檔描述的不太詳細,也沒有太好的例子,下面這篇文章主要給大家介紹了關(guān)于Vue中$attrs和$listeners詳解以及使用的相關(guān)資料,需要的朋友可以參考下2022-11-11
實際上在學習過程中,你會發(fā)現(xiàn)eslint檢查特別討厭,這個時候我們需要關(guān)閉掉eslint檢查,下面這篇文章主要給大家介紹了關(guān)于在Vue3項目中關(guān)閉ESLint的完整步驟,需要的朋友可以參考下2023-11-11