vue3 清空reactive的多種方式 精選 原創

在 Vue3 中，可以使用 reactive 函數創建響應式對象。這些響應式對象可以跟蹤其屬性的變化並且自動地更新視圖。但是在某些情況下，我們可能需要清空這些響應式對象。下面是一些方法來清空 Vue3 reactive。

方法一：使用 Object.assign(這種方法是有問題的,assign本身是追加,有相同的屬性名,則覆蓋;不存在的屬性名則添加,而{}沒有任何屬性,所以原本的obj啥也不會改變)
可以使用 Object.assign 將一個空對象分配給可觀察對象來清空它。例如：

import { reactive } from 'vue'

const obj = reactive({ name: 'John', age: 25 })

Object.assign(obj, {})

const list = reactive([]);


Object.assign(list , []);

應該要這麼做:

const form= reactive<{[index:string]:any}>({
   id:1,
   name:"2"
})
Object.keys(form).forEach((v,i)=>{
   delete form[v]
})

或者:

let ays = object.keys(carSafetyProcessForm);
ays.map((k)=>{
   carSafetyProcessForm[k] = undefined
});

這將清空 obj 對象。但是請注意，這種方法只能清空對象上的屬性，不能刪除對象本身。

方法二：使用 Object.keys 和 for...in 循環
可以使用 Object.keys 得到對象的屬性名稱列表，然後使用 for...in 循環將每個屬性設置爲 undefined 或 null。例如：

import { reactive } from 'vue'

const obj = reactive({ name: 'John', age: 25 })

for (const key in Object.keys(obj)) {
  obj[key] = undefined
}

應該要這麼做:

const form= reactive<{[index:string]:any}>({
   id:1,
   name:"2"
})
Object.keys(form).forEach((v,i)=>{
   delete form[v]
})

這將清空 obj 對象。但是請注意，這種方法只能清空對象上的屬性，不能刪除對象本身。

方法三：使用 delete 操作符
可以使用 delete 操作符刪除對象的每個屬性。例如：

import { reactive } from 'vue'

const obj = reactive({ name: 'John', age: 25 })

for (const key in obj) {
  delete obj[key]
}

這將清空 obj 對象。但是請注意，這種方法只能清空對象上的屬性，不能刪除對象本身。

方法四：重新賦值
可以將可觀察對象設置爲一個新的空對象。例如：

import { reactive } from 'vue'

let obj = reactive({ name: 'John', age: 25 })

obj = reactive({})

這將清空 obj 對象，並且創建一個新的空對象。但是請注意，在這種情況下，我們創建了一個新的對象，而不是清空原始對象。

總結
以上是清空 Vue3 reactive 的四種方法。但是請注意，這些方法只能清空對象上的屬性，不能刪除對象本身。如果需要刪除對象本身，則需要使用 delete 操作符或重新賦值。

項目代碼:

interface PageParam {
  rprjInfoId: any;
  dataList: any;
  dataListOne: any;
  dataListTwo: any;
  contractId: any;
  ctpMap: any;
  concatMap: any;
  flag: any;
  dataSize: any;
}

const pageParam = reactive<PageParam>({
  rprjInfoId: "",
  contractId: "",
  flag: "",
  dataSize: "",
  dataList: reactive([]),
  dataListOne: reactive([]),
  dataListTwo: reactive([]),
  ctpMap: reactive({}),
  concatMap: reactive({}),
});

//對話框關閉,清空數據
const handleCancel = () => {
  visible.value = false;
  //清空map
  Object.keys(pageParam.ctpMap).forEach((v, i) => {
    delete pageParam.ctpMap[v];
  });
  Object.keys(pageParam.concatMap).forEach((v, i) => {
    delete pageParam.concatMap[v];
  });
  //清空數組
  pageParam.dataList.length = 0;
  pageParam.dataListOne.length = 0;
  pageParam.dataListTwo.length = 0;
};