Вопрос проверяет понимание того, как Virtual DOM сопоставляет элементы списка и какие проблемы возникают при нестабильных ключах.
Использование index как key приводит к неправильному сопоставлению элементов при изменении массива. При добавлении, удалении или сортировке элементов Vue считает, что элементы просто «переехали». Это может ломать состояние компонентов, input-поля и анимации. Ошибки появляются не сразу, а при изменениях данных. Поэтому index допустим только для статичных списков.
Проблема использования index как key связана с тем, что индекс отражает позицию элемента, а не его сущность.
key должен идентифицировать элемент данных, а не его положение в массиве. Индекс меняется при любых операциях со списком, даже если сами элементы остались теми же.
При использовании index как key:
Vue переиспользует DOM-узлы не для тех данных
состояние дочерних компонентов «переезжает»
значения input могут оказаться привязанными к другим элементам
Использование index возможно, если:
список полностью статичен
элементы никогда не добавляются и не удаляются
порядок элементов не меняется
Лучше использовать:
уникальный id из данных
стабильный идентификатор, не зависящий от позиции
Index как key опасен для динамических списков и может приводить к трудноуловимым багам.
