vue3中reactive不能直接賦值的解決方案

更新時(shí)間：2022年05月25日 09:37:48 作者：前端阿彬

這篇文章主要介紹了vue3中reactive不能直接賦值的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3 reactive不能直接賦值

最近比較忙，都沒(méi)什么時(shí)間學(xué)習(xí)了。

在vue3里，ref和reacitve都可以定義響應(yīng)式數(shù)據(jù)，但是兩者有所不同。在使用reactive定義復(fù)雜結(jié)構(gòu)的響應(yīng)式數(shù)據(jù)時(shí)，如果你要對(duì)其賦值，會(huì)丟失其響應(yīng)性。然后賦值是我們經(jīng)常進(jìn)行的操作，那么該怎么解決呢？

方法

1. 改為ref定義

const arr= ref([])
arr.value = [1, 2, 3]

2. push新增數(shù)據(jù)

const arr = reactive([])
arr.push(...[1, 2, 3])

3.再封裝一層數(shù)據(jù)（推薦?。?/p>

const state = reactive({
? arr: []
});
state.arr = [1, 2, 3]

但是這樣的話(huà)在html模板里，使用數(shù)據(jù)就得state.arr

所以我們可以用解構(gòu)將它return出來(lái)

但是reactive解構(gòu)出來(lái)的數(shù)據(jù)會(huì)丟失響應(yīng)性

所以再用torefs()方法為它們添加響應(yīng)性

最終為：

const state = reactive({
? arr: []
});
state.arr = [1, 2, 3]
return{
? ...toRefs(state),
}

vue3 reactive賦值不響應(yīng)

看了好多方法，先都存著。

（1）多嵌套一層

setup(props) {
?? ?//a賦值的時(shí)候多套一層對(duì)象值賦到a的屬性a上
? let a=reactive({a:{id:1,name:'小明'}})
??
? Object
? function fn(){
? //改值時(shí)就可以直接給a.a賦值了
? ? a.a={id:2,name:'小黃'}
? ? console.log(a);
? ?
? }
? return {
? ? fn,a
? }
}

（2）使用ref

const data= ref([])?
data.value = [1, 2, 3]

（3）用obeject.assign

?let a=reactive({id:1,name:'小明'})
??
? ?function fn(){
? Object.assign(a,{id:2,name:'大明'})
? ?}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

解決vue項(xiàng)目axios每次請(qǐng)求session不一致的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目axios每次請(qǐng)求session不一致的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
vantUI 獲得piker選中值的自定義ID操作
這篇文章主要介紹了vantUI 獲得piker選中值的自定義ID操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
Vue中常用的rules校驗(yàn)規(guī)則的實(shí)現(xiàn)
在vue開(kāi)發(fā)中,難免遇到各種表單校驗(yàn),本文主要介紹了Vue中常用的rules校驗(yàn)規(guī)則的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
2023-10-10
vue cli 3.0 搭建項(xiàng)目的圖文教程
這篇文章主要介紹了vue cli 3.0 搭建項(xiàng)目的圖文教程，本文通過(guò)圖片文字相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
vue3中如何使用d3.js繪制流程圖(TS語(yǔ)法)
這篇文章主要給大家介紹了關(guān)于vue3中如何使用d3.js繪制流程圖的相關(guān)資料,D3.js是由javaScript語(yǔ)言編寫(xiě)繪圖庫(kù),其原理是通過(guò)調(diào)用一系列內(nèi)置函數(shù),生成SVG,并在網(wǎng)頁(yè)渲染,需要的朋友可以參考下
2023-10-10
vue實(shí)現(xiàn)全選功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
Vue.js中的extend綁定節(jié)點(diǎn)并顯示的方法
在本篇內(nèi)容里小編給大家整理了關(guān)于Vue.js中的extend綁定節(jié)點(diǎn)并顯示的方法以及相關(guān)知識(shí)點(diǎn)，需要的朋友們學(xué)習(xí)下。
2019-06-06
Vant中Popover氣泡彈出框位置錯(cuò)亂問(wèn)題解決
這篇文章主要為大家介紹了Vant中Popover氣泡彈出框位置錯(cuò)亂問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
基于vue實(shí)現(xiàn)圖片驗(yàn)證碼倒計(jì)時(shí)60s功能
這篇文章主要介紹了基于vue實(shí)現(xiàn)圖片驗(yàn)證碼倒計(jì)時(shí)60s功能,本文通過(guò)截圖實(shí)例代碼的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-12-12
vue項(xiàng)目實(shí)現(xiàn)會(huì)議預(yù)約功能(包含某天的某個(gè)時(shí)間段和某月的某幾天)
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)會(huì)議預(yù)約功能(包含某天的某個(gè)時(shí)間段和某月的某幾天),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-02-02