В чём разница между v-if и v-show и зачем нужен key в v-for?

`v-if` создаёт и удаляет элемент в DOM, `v-show` оставляет элемент и переключает display: none.

v-if

• Элемент не существует, пока условие ложно.
• Дороже при частом переключении: создание и уничтожение.
• Подходит, когда условие меняется редко или содержимое тяжёлое.

v-show

• Элемент всегда в DOM, меняется только стиль.
• Дешевле при частом переключении.
• Не работает с <template> и не поддерживает v-else.

key в v-for

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

key помогает Vue определить, какой элемент соответствует какому объекту при изменении списка. Без него Vue переиспользует элементы по позиции, из-за чего состояние (например, введённый текст) может «приклеиться» не к тому элементу.

Правила

• Ключом служит уникальный и стабильный идентификатор, а не индекс массива.
• Не стоит использовать v-if и v-for на одном элементе: у v-if во Vue 3 приоритет выше.

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

v-if добавляет и убирает узел, v-show скрывает стилем. key в v-for должен быть уникальным и стабильным.