> Как key влияет на перерендеринг шаблона во Vue (Vue.js)

Ключ (key) во Vue - это специальный атрибут, который используется для идентификации элементов при рендеринге списков или условных блоков. Он напрямую влияет на механизм перерендеринга: Vue использует key для сопоставления виртуальных DOM-узлов с реальными, чтобы минимизировать мутации.

Основное влияние:

• Без key (или с индексом массива) Vue применяет «патч на месте» (in-place patch). При изменении списка элементы переиспользуются, что может привести к некорректному состоянию (например, сохраняются фокус, ввод в input или анимации).

• С уникальным key Vue точно определяет, какой элемент был добавлен, удалён или перемещён, и перерендеривает только изменённые компоненты, а не весь список. Это повышает производительность и предсказуемость.

Пример:

<!-- Плохо: key по индексу, элементы могут переиспользоваться некорректно -->
<div v-for="(item, index) in items" :key="index">{{ item.text }}</div>

<!-- Хорошо: уникальный идентификатор, точное отслеживание -->
<div v-for="item in items" :key="item.id">{{ item.text }}</div>

Важно: key также используется в условных блоках (v-if/v-else) для принудительного пересоздания компонента, если нужно сбросить его внутреннее состояние. Без ключа Vue может переиспользовать DOM-элементы, сохраняя нежелательные данные.