Для чего нужно значение key в v-for?

Значение `key` в `v-for` (Vue) нужно, чтобы Vue уникально идентифицировал элементы списка — для эффективного и корректного обновления DOM при изменении данных.

Зачем нужен

При рендере списка через v-for Vue сравнивает старый и новый список. key говорит, какой элемент «тот же самый» — тогда Vue переиспользует DOM и состояние, а не пересоздаёт:

<li v-for="user in users" :key="user.id">
  {{ user.name }}
</li>

Что даёт

• Корректное обновление — Vue отслеживает, что добавилось/удалилось/переместилось.
• Сохранение состояния — состояние компонента/инпута остаётся привязанным к нужным данным.
• Производительность — переиспользование вместо пересоздания (алгоритм патчинга работает эффективнее).

Без key (или с индексом)

Vue по умолчанию использует «in-place patch» — обновляет элементы по позиции, что при вставке/удалении/сортировке путает состояние и вызывает баги:

<!-- Плохо при изменении порядка -->
<li v-for="(item, i) in items" :key="i">

Правила

• Уникальные значения среди соседей.
• Стабильные — id из данных, не индекс (при динамике) и не случайные значения.

Аналогия с React

:key в Vue играет ту же роль, что key в React — идентификация для reconciliation/patching.

Коротко для собеседования

:key в v-for уникально идентифицирует элементы списка для эффективного патчинга DOM: Vue переиспользует элементы и сохраняет состояние вместо пересоздания. Ключи должны быть уникальными и стабильными (id из данных). Без key или с индексом — баги состояния при изменении порядка. Аналог key в React.