所以我用axios从数据库导入一个列表，并将其存储在一个变量中，我们称之为tasks，每个对象可以像这样：

tasks: [
    { title: 'some text here" },
    { completed: false },
  ]

假设我有2000或3000个这样的任务，在前端我为每个任务设置一个复选框，将completed中的布尔值设置为true或false

<li v-for="task in tasks">
      <input type="checkbox" v-model="task.completed">
      <label :for="task.title">{{task.title}}</label>
</li>`

很好，现在我需要保存更改，以便更新数据库。

submit(){
    return axiosComponent.updateTask(this.tasks)

  }

我的问题就出在这里。点击提交，我正在遍历整个任务列表，基本上保存了所有内容。这可能会导致超时和其他性能问题，因为它必须遍历成千上万的对象。所以我想做的是以某种方式更改提交方法，使其只保存实际更改的数据。因此，如果两个任务在“已完成”中被设置为false或true，则只将这两个任务保存到数据库中，而不保存整个列表。
我不知道这是我可以在frotend上做的事情还是我需要在后端做一些事情。对于那些感兴趣的人，这里是我的后端代码：

axios组件：

updateTask(tasks){
    return axios.put('task/updateStatus', tasks)
  }

控制器获取axios数据：

@PutMapping("/updateStatus")
    public void updateStatusOnTask(@RequestBody List<TaskEntity> taskEntities){
        taskManager.updateTaskStatus(taskEntities);
    }

经理

public void updateTaskStatus(List<TaskEntity> taskEntities) {
        taskRepository.saveAll(taskEntities);
    }

那么我尝试了什么呢？一个想法是创建计算属性，将选中和未选中的任务保存在它们自己的对象中，然后将它们放在我的submit方法中，而不是“tasks”。

completedTasks(){
    if(this.tasks){
      return this.tasks.filter(task => task.completed)
    }
  },
  unresolvedTasks(){
    if(this.tasks){
      return this.errors.filter(task => !task.completed)
    }
  },

  submit(){
    return axiosComponent.updateTask(this.completedTasks)

  }

当然，问题是当我保存这些任务时，实际上并没有将任何内容保存到数据库中。我没有更改“tasks”对象中的值。我只是将更改后的值放入一个新的值中。因此，当我保存并重新加载页面时，一旦tasks对象被加载，它们就会被覆盖。另外，如果我有1000个未解析的任务，那么如果我需要保存对这些的任何更改，我们将会遇到同样的超时问题。