Почему не рекомендуется использовать index как key?

Question

Использование index как key приводит к неправильному сопоставлению элементов при изменении массива. При добавлении, удалении или сортировке элементов Vue считает, что элементы просто «переехали». Это может ломать состояние компонентов, input-поля и анимации. Ошибки появляются не сразу, а при изменениях данных. Поэтому index допустим только для статичных списков.

YeaHub · Accepted Answer

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