vue3中reactive不能直接賦值的解決方案
更新時(shí)間：2022年05月25日 09:37:48 作者：前端阿彬
這篇文章主要介紹了vue3中reactive不能直接賦值的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue3 reactive不能直接賦值
最近比較忙，都沒什么時(shí)間學(xué)習(xí)了。
在vue3里，ref和reacitve都可以定義響應(yīng)式數(shù)據(jù)，但是兩者有所不同。在使用reactive定義復(fù)雜結(jié)構(gòu)的響應(yīng)式數(shù)據(jù)時(shí)，如果你要對其賦值，會丟失其響應(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]但是這樣的話在html模板里，使用數(shù)據(jù)就得state.arr
所以我們可以用解構(gòu)將它return出來
但是reactive解構(gòu)出來的數(shù)據(jù)會丟失響應(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í)候多套一層對象值賦到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)目下npm或yarn下安裝echarts多個(gè)版本方式
這篇文章主要介紹了vue項(xiàng)目下npm或yarn下安裝echarts多個(gè)版本方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
解決vue prop傳值default屬性如何使用,為何不生效的問題
這篇文章主要介紹了解決vue prop傳值default屬性如何使用,為何不生效的問題。具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue 中filter的多種用法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-04-04
v-slot和slot、slot-scope之間相互替換實(shí)例
這篇文章主要介紹了v-slot和slot、slot-scope之間相互替換實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue學(xué)習(xí)筆記進(jìn)階篇之函數(shù)化組件解析
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之函數(shù)化組件探究，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
在Vue3中,this的使用方式與Vue2存在較大差異,尤其是在引入組合式API后,本文詳細(xì)解析了Vue3中this的使用情況、底層源碼和設(shè)計(jì)理念,并提供了面試技巧,感興趣的可以了解一下2024-09-09
vue項(xiàng)目中js文件使用vue的this實(shí)例說明
這篇文章主要介紹了vue項(xiàng)目中js文件使用vue的this實(shí)例說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue3?中一個(gè)組件從創(chuàng)建到掛在,會經(jīng)過3個(gè)重點(diǎn)步驟：創(chuàng)建組件實(shí)例,設(shè)置組件實(shí)例,創(chuàng)建并執(zhí)行帶副作用的渲染函數(shù),本文將著重講清?創(chuàng)建組件實(shí)例、設(shè)置組件實(shí)例?這兩個(gè)過程都做了什么,這部分邏輯很簡單,但你會從中學(xué)習(xí)到?Vue?優(yōu)秀的實(shí)踐技巧,需要的朋友可以參考下2024-07-07
基于vue實(shí)現(xiàn)swipe分頁組件實(shí)例
本篇文章主要介紹了基于vue實(shí)現(xiàn)swipe分頁組件實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
在Vue.js中,組件間的通信是構(gòu)建復(fù)雜應(yīng)用的關(guān)鍵,但當(dāng)涉及到非父子關(guān)系的組件通信時(shí),傳統(tǒng)的做法就顯得力不從心了,本文將深入探討幾種有效的非父子組件通信方法,并通過具體的代碼示例來幫助讀者理解和應(yīng)用這些技術(shù),需要的朋友可以參考下2024-09-09