Алгоритм diff и роль key

↑ 7.1 Vue под капотом · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: senior

Зачем это на собесе

Часто спрашивают: «зачем key в v-for и почему нельзя index».

Как работает patch

Сравниваются два списка vnode:

1. Пропускается общий префикс и суффикс (одинаковые type и key).
2. Если остались только новые — монтируются, только старые — размонтируются.
3. Для перемешанной середины строится карта key → новый индекс и вычисляется наибольшая возрастающая подпоследовательность (LIS). Узлы из неё не двигаются, остальные переставляются.

Роль key

key — идентичность узла. Без ключа Vue переиспользует элемент «на месте» и обновляет его содержимое; локальное состояние (значение input, фокус, анимации, состояние дочернего компонента) остаётся не у того элемента.

<li v-for="todo in todos" :key="todo.id">
  <input v-model="todo.text" />
</li>

Правила

• ключ уникален среди соседей и стабилен (id из данных);
• нельзя использовать index, если список сортируется, фильтруется или элементы удаляются из середины;
• Math.random() как ключ пересоздаёт все узлы на каждый рендер;
• key на компоненте или элементе принудительно пересоздаёт его при смене значения (приём для сброса состояния): <Form :key="userId" />.

Вопросы с ответами

Что случится, если использовать index как key?

При вставке или удалении в середине ключи сдвигаются, Vue обновит не те элементы, состояние (input, дочерние компоненты) «прилипнет» к неверным строкам, появятся лишние обновления.

Как принудительно сбросить состояние компонента?

Поменять key: Vue уничтожит старый экземпляр и создаст новый.