\n\n\n```\n\nБез стабильного `key` Vue может переиспользовать DOM «по индексу». Тогда при вставке/удалении/сортировке состояние внутри строк (инпуты, фокус, анимации) «переезжает» на чужие данные — классический баг.\n\n`key` должен быть **уникальным среди соседей** и стабильным (обычно id с бэка). Индекс массива как `key` допустим только для статичных списков без перестановки. Не используйте случайные значения на каждый рендер.\n\n`v-for` также умеет `v-for=\"(item, index) in list\"`, для объектов — `(value, key, index)`. В Vue 3 приоритет `v-if` vs `v-for` на одном узле изменён относительно Vue 2 — лучше не совмещать.\n\n## Итог\n\n`v-for` рисует списки; `key` — идентичность элемента для алгоритма патча. На junior-вопросе ждут «не индекс, а id» и пример с «поехавшими» инпутами."}}}

Как работает `v-for` и зачем нужны `key`?

Vue · junior · сложность 2

Войти, чтобы отмечать

Ключевая идея

v-for рендерит список по массиву или объекту. key помогает Vue сопоставлять элементы между обновлениями: какой узел переиспользовать, а какой пересоздать.

Пример

<script setup>
import { ref } from 'vue'
const todos = ref([
  { id: 1, text: 'Learn Vue' },
  { id: 2, text: 'Write tests' },
])
</script>

<template>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</template>

Без стабильного key Vue может переиспользовать DOM «по индексу». Тогда при вставке/удалении/сортировке состояние внутри строк (инпуты, фокус, анимации) «переезжает» на чужие данные — классический баг.

key должен быть уникальным среди соседей и стабильным (обычно id с бэка). Индекс массива как key допустим только для статичных списков без перестановки. Не используйте случайные значения на каждый рендер.

v-for также умеет v-for="(item, index) in list", для объектов — (value, key, index). В Vue 3 приоритет v-if vs v-for на одном узле изменён относительно Vue 2 — лучше не совмещать.

Итог

v-for рисует списки; key — идентичность элемента для алгоритма патча. На junior-вопросе ждут «не индекс, а id» и пример с «поехавшими» инпутами.

Загрузка…