Что гарантирует аргумент key в списках Vue и влияет ли он на порядок элементов

Что проверяют

Понимаете ли вы, что key это идентичность узла для алгоритма сравнения, а не подсказка о сортировке. Формулировка провокационная: если рассуждать про порядок, легко согласиться с тем, чего ключ не делает.

Как отвечать

Порядок элементов задаёт массив, по которому идёт v-for, ключ на него не влияет. Ключ отвечает на другой вопрос: элемент с таким значением в новом списке это тот же самый элемент, что и раньше, или другой.

От этого зависит, что произойдёт при перестановке. С ключом Vue переиспользует существующий узел и экземпляр компонента вместе с их состоянием и переместит их. Без ключа применяется обновление на месте: узлы остаются, где были, в них переписывается содержимое.

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

Разница видна там, где состояние живёт не в данных: введённый текст, фокус, отметка чекбокса, позиция прокрутки, таймер внутри дочернего компонента. При обновлении на месте всё это останется на своей позиции и достанется соседу. Ключ берут из данных, он уникален среди соседей и примитивен. В Vue 3 у <template v-for> ключ ставится на сам тег шаблона. Смена ключа это штатный способ заставить компонент пересоздаться.

Где спотыкаются

Говорят, что без ключа список перерисуется целиком. Наоборот, без ключа Vue старается ничего не пересоздавать, и проблема не в скорости, а в перепутанном состоянии.

Ставят ключом индекс. При вставке в начало или сортировке индексы съезжают, и ключ перестаёт обозначать конкретный объект: получается то же обновление на месте, только с иллюзией правильности. Обратная крайность, случайное число на каждый рендер, пересоздаёт весь список и ломает анимации и фокус.

Допускают дубли ключей: в консоли предупреждение, на экране пропавшие или задвоенные элементы. Обычно это склейка нескольких источников или ключ по полю, уникальному лишь внутри одной страницы.