Vue.js如何将修改后的data数组arr重置为初始值？

在Vue.js中，要把修改后的数组重置为初始状态，有两种常用且可靠的实现方式：

方法一：预先保存初始数组的独立副本 #

先在组件外或created钩子中保存一份初始数组的副本（避免引用关联），重置时直接将原数组替换为这个副本。这种方式适合初始数组较复杂或后续可能需要复用初始值的场景。

修改你的代码示例如下：

<template>
  <div>
    <h1>Example 1</h1>
    <div
      v-for="(a, i) in arr"
      :key="i"
      :checked="a"
      @click="toggleItem(i)"
      class="checkbox"
    >
      <div class="out">{{ a }}</div>
    </div>
    <div class="out">{{ arr }}</div>
    <input @click="resetState" type="button" value="Reset" />
  </div>
</template>

<script>
// 预先定义初始数组，作为独立副本
const INITIAL_ARR = [true, false, true, false, true, true, true];

export default {
  data() {
    return {
      arr: [...INITIAL_ARR] // 用展开运算符创建初始数组的副本，避免引用关联
    };
  },
  methods: {
    toggleItem(index) {
      this.arr.splice(index, 1, !this.arr[index]);
    },
    resetState() {
      // 重置为初始副本
      this.arr = [...INITIAL_ARR];
      // 如果数组包含对象等复杂类型，需用深拷贝：
      // this.arr = JSON.parse(JSON.stringify(INITIAL_ARR));
    },
  },
};
</script>

方法二：直接赋值初始数组字面量 #

如果初始数组结构简单且固定，可直接在重置方法中重新赋值初始数组的字面量，这种方式更简洁。

修改resetState方法即可：

resetState() {
  this.arr = [true, false, true, false, true, true, true];
}

注意事项 #

• 不要直接将初始数组的引用赋值给this.arr（比如this.arr = INITIAL_ARR），这样会让this.arr和初始数组指向同一个内存地址，后续修改this.arr会同步改变初始数组的值，导致重置功能失效。
• Vue能检测到数组引用的变化，所以直接替换整个数组会自动触发视图更新，无需额外操作。

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