vue3的reactive賦值問題解決
問題
vue3中直接對(duì)reactive聲明的變量本身進(jìn)行賦值是無效的。
篩選表單重置功能
// 數(shù)據(jù)結(jié)構(gòu)
let filterForm = reactive({
createDate: null,
q: null
})
起初我的做法是直接給filterForm變量賦值。
function reset() {
filterForm = {
createDate: null,
q: null
}
}
寫完之后發(fā)現(xiàn)無效，便改成了單個(gè)數(shù)據(jù)置空，此時(shí)生效了。
function reset() {
filterForm.createDate = null
filterForm.q = null
}
彈窗數(shù)據(jù)回顯
const props = defineProps({
visible: {
type: Boolean,
default: false
},
data: {
type: Object,
default: {}
}
})
let visible = ref(false)
let modalData = reactive({})
我的邏輯：監(jiān)聽visible變量，如果彈窗顯示，則將數(shù)據(jù)回顯。
我的做法是：把props.data結(jié)構(gòu)賦值給modalData變量，結(jié)果沒有生效，我用vue插件查看，插件顯示modalData變量是一個(gè)空對(duì)象。
用console.log打印，發(fā)現(xiàn)數(shù)據(jù)是有值的。
watch{
() => props.visible,
(val) => {
if(val) {
modalData = { ...props.data }
}
visible = val
}
}
查了下資料，發(fā)現(xiàn)直接給reactive聲明的變量本身賦值是沒有效果的。
于是我便給modalData里面又嵌套了一層data。
let modalData = reactive({
data: {}
})
watch{
() => props.visible,
(val) => {
if(val) {
modalData.data = { ...props.data }
}
visible = val
}
}
解決方案
單個(gè)賦值
let formData = reactive({
updateDate: null
})
formData.updateDate = '2023-7-10'
function reset() {
formData.updateDate = null
}
多嵌套一層
const props = defineProps({
data:{
type: Object,
default: {}
}
})
const modalData = reactive({
data:{}
})
modalData.data = { ...props.data }
補(bǔ)充
在查閱資源時(shí)，發(fā)現(xiàn)reavtive聲明的數(shù)組變量，賦值時(shí)也同樣有問題。
如果需要清空數(shù)組，不能直接賦值一個(gè)空數(shù)組，而是要將數(shù)組長度設(shè)置為 0。
let arr = reactive([]) // 錯(cuò)誤寫法 arr = [] // 正確寫法 arr.length = 0
到此這篇關(guān)于vue3的reactive賦值問題解決的文章就介紹到這了,更多相關(guān)vue3 reactive賦值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 驗(yàn)證碼界面實(shí)現(xiàn)點(diǎn)擊后標(biāo)灰并設(shè)置div按鈕不可點(diǎn)擊狀態(tài)
今天小編就為大家分享一篇vue 驗(yàn)證碼界面實(shí)現(xiàn)點(diǎn)擊后標(biāo)灰并設(shè)置div按鈕不可點(diǎn)擊狀態(tài)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
在Vue中實(shí)現(xiàn)放大鏡效果,主要是為了增強(qiáng)用戶體驗(yàn),讓用戶在查看商品圖片時(shí)能更清晰地觀察細(xì)節(jié),這篇文章主要介紹了vue3圖片放大鏡效果實(shí)現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-11-11
vue router帶參數(shù)頁面刷新或回退參數(shù)消失的解決方法
這篇文章主要介紹了vue router帶參數(shù)頁面刷新或回退參數(shù)消失的解決方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
vue3+vite+electron構(gòu)建項(xiàng)目完整實(shí)例代碼
Electron+Vite+Vue3的組合為開發(fā)者提供了一個(gè)高效、靈活的跨平臺(tái)桌面應(yīng)用開發(fā)框架,下面這篇文章主要介紹了vue3+vite+electron構(gòu)建項(xiàng)目的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-03-03
vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐
ElementUI的el-date-picker使用時(shí),有時(shí)候想要限制用戶選擇的時(shí)間范圍,本文就來介紹了vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐,感興趣的可以了解一下2023-10-10
Vue條件循環(huán)判斷+計(jì)算屬性+綁定樣式v-bind的實(shí)例
今天小編就為大家分享一篇Vue條件循環(huán)判斷+計(jì)算屬性+綁定樣式v-bind的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue Antd 輸入框Input自動(dòng)聚焦方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了vue3+TS reactive設(shè)定類型方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
隨著現(xiàn)代前端框架的發(fā)展,懶加載作為一種優(yōu)秀的性能優(yōu)化技術(shù),在用戶體驗(yàn)和加載速度上扮演著越來越重要的角色,本文將詳細(xì)介紹如何在 Vue 3 中實(shí)現(xiàn)懶加載組件,確保你能夠?qū)⑦@一技術(shù)應(yīng)用到自己的項(xiàng)目中,需要的朋友可以參考下2024-11-11