快捷導(dǎo)航

vue3的reactive賦值問(wèn)題解決

更新時(shí)間：2024年03月29日 11:34:58 作者：小貓先生的保安

vue3中直接對(duì)reactive聲明的變量本身進(jìn)行賦值是無(wú)效的,本文主要介紹了vue3的reactive賦值問(wèn)題解決,具有一定的參考價(jià)值,感興趣的可以了解一下

問(wèn)題

vue3中直接對(duì)reactive聲明的變量本身進(jìn)行賦值是無(wú)效的。

篩選表單重置功能

// 數(shù)據(jù)結(jié)構(gòu)
let filterForm = reactive({
  createDate: null,
  q: null
})

起初我的做法是直接給filterForm變量賦值。

function reset() {
  filterForm = {
    createDate: null,
    q: null
  }
}

寫完之后發(fā)現(xiàn)無(wú)效，便改成了單個(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é)果沒(méi)有生效，我用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聲明的變量本身賦值是沒(méi)有效果的。

于是我便給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í)也同樣有問(wèn)題。

如果需要清空數(shù)組，不能直接賦值一個(gè)空數(shù)組，而是要將數(shù)組長(zhǎng)度設(shè)置為 0。

let arr = reactive([])

// 錯(cuò)誤寫法
arr = []

// 正確寫法
arr.length = 0

到此這篇關(guān)于vue3的reactive賦值問(wèn)題解決的文章就介紹到這了,更多相關(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ì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
vue3圖片放大鏡效果實(shí)現(xiàn)的完整教程
在Vue中實(shí)現(xiàn)放大鏡效果,主要是為了增強(qiáng)用戶體驗(yàn),讓用戶在查看商品圖片時(shí)能更清晰地觀察細(xì)節(jié),這篇文章主要介紹了vue3圖片放大鏡效果實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-11-11
vue router帶參數(shù)頁(yè)面刷新或回退參數(shù)消失的解決方法
這篇文章主要介紹了vue router帶參數(shù)頁(yè)面刷新或回退參數(shù)消失的解決方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
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)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2026-03-03
vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐
ElementUI的el-date-picker使用時(shí),有時(shí)候想要限制用戶選擇的時(shí)間范圍,本文就來(lái)介紹了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ì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue Antd 輸入框Input自動(dòng)聚焦方式
這篇文章主要介紹了vue Antd 輸入框Input自動(dòng)聚焦方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue實(shí)現(xiàn)圖片拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
vue3+TS reactive設(shè)定類型方式
這篇文章主要介紹了vue3+TS reactive設(shè)定類型方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
詳解如何在Vue3中實(shí)現(xiàn)懶加載組件
隨著現(xiàn)代前端框架的發(fā)展,懶加載作為一種優(yōu)秀的性能優(yōu)化技術(shù),在用戶體驗(yàn)和加載速度上扮演著越來(lái)越重要的角色,本文將詳細(xì)介紹如何在 Vue 3 中實(shí)現(xiàn)懶加載組件,確保你能夠?qū)⑦@一技術(shù)應(yīng)用到自己的項(xiàng)目中,需要的朋友可以參考下
2024-11-11