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