VueJS中如何重置Reactive响应式数组？

直接替换数组（最简方案） #

你当前的代码逻辑本身是可行的，但出现累加大概率是newPlan本身带着原数组的内容，或者赋值时机有问题。先确认newPlan是完全独立的新数组，直接替换即可，甚至不需要提前置空：

import { store } from "./store.js";
// 用展开运算符创建新数组，彻底切断与原数据的引用关联
store.plan = [...newPlan];

如果一定要先清空再赋值，也可以，但属于多余操作，直接替换更高效。

保留数组引用的清空方式 #

要是你需要保留原数组的引用（比如组件已经绑定了这个数组实例），可以用数组方法先清空原有元素，再添加新内容：

// 清空原数组所有元素，保留数组引用不变
store.plan.splice(0);
// 将新数组的元素批量添加进去
store.plan.push(...newPlan);

splice(0)会直接清空数组内容，同时保持原引用，确保响应式更新正常触发。

换用ref定义数组（更适合数组场景） #

如果你的核心操作对象就是数组，用ref比在reactive对象里定义数组更直观，能避免很多引用替换的潜在问题：

// store.js 修改为如下写法
import { ref } from 'vue'

export const plan = ref([])

然后在组件中直接赋值：

import { plan } from "./store.js";
plan.value = newPlan; // 直接替换数组，响应式完全正常

原代码出现累加的原因 #

最可能的情况是newPlan并非纯新数组，而是基于原store.plan扩展生成的（比如写了newPlan = [...store.plan, ...someNewData]），这样赋值后自然会带着旧数据。检查下newPlan的生成逻辑，确保它是你需要的全新数据集合。

内容的提问来源于stack exchange，提问作者Bilal