Що станеться, якщо використовувати v-for без ключа (key)?
Використання v-for без key - це поширена помилка, яка призводить до непередбачуваної поведінки інтерфейсу. Vue дозволяє не вказувати ключ, але робить це неоптимально і потенційно небезпечно.
Ось що насправді відбувається.
Головне: Vue буде використовувати стратегію in-place patching
Без key Vue не зможе правильно зіставити елементи списку, тому буде:
оновлювати наявні DOM-елементи «на місці»,
замінюючи їхній вміст, а не створюючи/видаляючи потрібні елементи.
До чого це призводить?
1. Неправильні оновлення DOM
Vue подумає, що старий елемент = новий елемент, і просто оновить його текст, але залишить:
- стан focus
- внутрішні компоненти
- transition-ефекти
- локальний стан дочірніх компонентів
Це може спричинити дуже дивні баги.
2. Перемішування DOM
Приклад:
<li v-for="item in items">
<input v-model="item.value">
</li>Якщо items поміняти місцями:
- значення полів вводу залишаться у старих DOM-елементів
- а текст оновиться під нові дані
Підсумок -> невідповідність даних і UI.
3. Втрата коректної роботи компонентів у списках
Якщо рендериш компоненти:
<UserCard v-for="user in users" :user="user" />І не вказав key, Vue буде:
- перевикористовувати не той компонент
- залишати старі props у новому компоненті
- не викликати правильні lifecycle-хуки
4. Анімації списків (transition-group) працювати не будуть
Без ключів Vue не зможе відстежувати:
- які елементи додані
- які видалені
- які переміщені
І анімація буде «ламатися».
Приклад, де все ламається
<div id="app">
<div v-for="n in numbers">
<input v-model="n.value">
</div>
</div>Якщо переставити елементи місцями:
this.numbers.reverse();Введений користувачем текст переплутається.
Навіщо потрібен key?
key - це унікальний ідентифікатор, який допомагає Vue зрозуміти:
- який елемент щойно додали
- який видалили
- який просто змінили
Тобто key = «паспорт» DOM-елемента.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.