快捷導(dǎo)航

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]

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