vue3的reactive賦值問題解決

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

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

問題

vue3中直接對reactive聲明的變量本身進行賦值是無效的。

篩選表單重置功能

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

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

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

寫完之后發(fā)現(xiàn)無效，便改成了單個數(shù)據(jù)置空，此時生效了。

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結構賦值給modalData變量，結果沒有生效，我用vue插件查看，插件顯示modalData變量是一個空對象。

用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
  }
}

解決方案

單個賦值

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 }

補充

在查閱資源時，發(fā)現(xiàn)reavtive聲明的數(shù)組變量，賦值時也同樣有問題。

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

let arr = reactive([])

// 錯誤寫法
arr = []

// 正確寫法
arr.length = 0

到此這篇關于vue3的reactive賦值問題解決的文章就介紹到這了,更多相關vue3 reactive賦值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

策略模式實現(xiàn) Vue 動態(tài)表單驗證的方法
策略模式（Strategy Pattern）又稱政策模式，其定義一系列的算法，把它們一個個封裝起來，并且使它們可以互相替換。封裝的策略算法一般是獨立的，策略模式根據(jù)輸入來調整采用哪個算法。這篇文章主要介紹了策略模式實現(xiàn) Vue 動態(tài)表單驗證,需要的朋友可以參考下
2019-09-09
vue3項目打包與上線詳細圖文教程
這篇文章主要給大家介紹了關于vue3項目打包與上線的相關資料,在項目完成得差不多得時候,就可以開始打包部署了,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-12-12
詳解如何使用 vue-cli 開發(fā)多頁應用
本篇文章主要介紹了詳解如何使用 vue-cli 開發(fā)多頁應用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
Vue使用formData格式類型上傳文件的示例
這篇文章主要介紹了Vue使用formData格式類型上傳文件的示例代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2021-09-09
.vue?組件打包成?.js的操作方法
這篇文章主要介紹了.vue?組件打包成?.js的操作方法,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-07-07
vue單向數(shù)據(jù)流的深入講解
單向數(shù)據(jù)流方式使用一個上傳數(shù)據(jù)流和一個下傳數(shù)據(jù)流進行雙向數(shù)據(jù)通信,兩個數(shù)據(jù)流之間相互獨立,下面這篇文章主要給大家介紹了關于vue單向數(shù)據(jù)流的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-07-07
如何使用 vxe-table 實現(xiàn)左邊是樹右邊是表格聯(lián)動功能
使用 vxe-table 來實現(xiàn)左邊是樹,右邊是表格聯(lián)動功能,當需要實現(xiàn)左右兩側聯(lián)動時,表格 vxe-grid 配合分割模板 vxe-split 就很容易實現(xiàn)了,下面通過實例代碼給大家介紹使用 vxe-table 來實現(xiàn)左邊是樹,右邊是表格聯(lián)動功能,感興趣的朋友一起看看吧
2025-03-03
elementui使用el-upload組件實現(xiàn)自定義上傳的詳細步驟
upload上傳是前端開發(fā)很常用的一個功能,在Vue開發(fā)中常用的Element組件庫也提供了非常好用的upload組件,這篇文章主要給大家介紹了關于elementui使用el-upload組件實現(xiàn)自定義上傳的詳細步驟,需要的朋友可以參考下
2023-12-12
詳解用webpack2.0構建vue2.0超詳細精簡版
本篇文章主要介紹了詳解用webpack2.0構建vue2.0超詳細精簡版，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
在elementui中Notification組件添加點擊事件實例
這篇文章主要介紹了在elementui中Notification組件添加點擊事件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11