在 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;
};