如何使用组合清除 Vue3 中的反应数组？答案

【问题标题】：How do I clear a reactive array in Vue3 using composition?如何使用组合清除 Vue3 中的反应数组？
【发布时间】：2022-09-25 03:11:07
【问题描述】：

我的项目中有以下内容...

const basicRecords = reactive([]);

它基本上只是容纳一系列对象。我希望能够刷新这个数组，这需要我删除所有记录并将它们添加回来。为此，我做了以下...

basicRecords.splice(0);
basicRecords.push(...recordResult.data);

这似乎可行，但也似乎超级hacky。

在 Vue3 中重置反应数组的正确方法是什么？

【解决方案1】：

尝试使用Object.assign 来保持其反应性：

const basicRecords = reactive([]);

Object.assign(basicRecords, recordResult.data)

或将basicRecords 定义为反应状态的内部字段：

const state = reactive({basicRecords : []});

state.basicRecords = recordResult.data

或 ref ：

const basicRecords = ref([]);

basicRecords.value = recordResult.data

【讨论】：