vue3中reactive不能直接賦值的解決方案
更新時間：2022年05月25日 09:37:48 作者：前端阿彬
這篇文章主要介紹了vue3中reactive不能直接賦值的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue3 reactive不能直接賦值
最近比較忙，都沒什么時間學習了。
在vue3里，ref和reacitve都可以定義響應式數(shù)據(jù)，但是兩者有所不同。在使用reactive定義復雜結構的響應式數(shù)據(jù)時，如果你要對其賦值，會丟失其響應性。然后賦值是我們經(jīng)常進行的操作，那么該怎么解決呢？
方法
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ù)（推薦！）
const state = reactive({
? arr: []
});
state.arr = [1, 2, 3]但是這樣的話在html模板里，使用數(shù)據(jù)就得state.arr
所以我們可以用解構將它return出來
但是reactive解構出來的數(shù)據(jù)會丟失響應性
所以再用torefs()方法為它們添加響應性
最終為：
const state = reactive({
? arr: []
});
state.arr = [1, 2, 3]
return{
? ...toRefs(state),
}vue3 reactive賦值不響應
看了好多方法，先都存著。
（1）多嵌套一層
setup(props) {
?? ?//a賦值的時候多套一層對象值賦到a的屬性a上
? let a=reactive({a:{id:1,name:'小明'}})
??
? Object
? function fn(){
? //改值時就可以直接給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:'大明'})
? ?}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了解決vue項目axios每次請求session不一致的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vantUI 獲得piker選中值的自定義ID操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue中常用的rules校驗規(guī)則的實現(xiàn)
在vue開發(fā)中,難免遇到各種表單校驗,本文主要介紹了Vue中常用的rules校驗規(guī)則的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了vue cli 3.0 搭建項目的圖文教程，本文通過圖片文字相結合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要給大家介紹了關于vue3中如何使用d3.js繪制流程圖的相關資料,D3.js是由javaScript語言編寫繪圖庫,其原理是通過調用一系列內置函數(shù),生成SVG,并在網(wǎng)頁渲染,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)全選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
在本篇內容里小編給大家整理了關于Vue.js中的extend綁定節(jié)點并顯示的方法以及相關知識點，需要的朋友們學習下。2019-06-06
這篇文章主要為大家介紹了Vant中Popover氣泡彈出框位置錯亂問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了基于vue實現(xiàn)圖片驗證碼倒計時60s功能,本文通過截圖實例代碼的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
vue項目實現(xiàn)會議預約功能(包含某天的某個時間段和某月的某幾天)
這篇文章主要介紹了vue項目實現(xiàn)會議預約功能(包含某天的某個時間段和某月的某幾天),本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02