Самый эффективный способ изменить элемент в массиве объектов? [VUEX]

#javascript #vue.js #vuex

#javascript #vue.js #vuex

Вопрос:

Я прочитал официальный пример Vuex о том, как изменить состояние элемента в массиве данных объектов.

 editTodo (state, { todo, text = todo.text, done = todo.done }) {
    const index = state.todos.indexOf(todo)

    state.todos.splice(index, 1, {
      ...todo,
      text,
      done
    })
  }
 

Кажется немного излишним сначала найти индекс (первый цикл), выполнить сращивание и выполнить копирование с помощью оператора распространения ...todo (будет ли это считаться вторым циклом?).

Следуя документам:

При добавлении новых свойств к объекту вы должны либо: использовать Vue.set(obj, 'newProp', 123) , либо заменить этот объект новым. Например, используя синтаксис распространения объекта: state.obj = { ...state.obj, newProp: 123 }

Существует только два способа установки / обновления свойств объекта.

В сценарии с большими данными это вызывает некоторые проблемы с производительностью. Есть ли лучший (более эффективный) способ обновить элемент в массиве объектов?

Комментарии:

1. Действительно ли это вызывает проблемы с производительностью? Если вам нужно было сделать это за один проход, и вы просто Меняете уже существующий элемент (т. Е. Не Добавляете его), вы могли map бы выполнить задачи, например state.todos.map(todo => todo === todo ? { ...todo, text, done } : todo)

2. Это вызывает проблемы с производительностью, если вы фиксируете editTodo тысячи раз, один за другим. Было бы лучше собрать все измененные задачи в один newTodos и заменить state.todos на newTodos один раз?

3. Как одновременно изменяются тысячи задач в вашем приложении? Если вопрос чисто гипотетический, как такое количество записей нужно изменить в любой ситуации? Если они загружены откуда-то еще, сбросьте всю коллекцию.