Задать вопрос
@FilatovNikita
vue

Зачем нужен атрибут key во vue?

Здравствуйте прочитал кусок из документации
Атрибут key помогает алгоритму работы с виртуальным DOM определить, какие ноды соответствует какой строке данных. Если этот атрибут не указан, Vue использует алгоритм, минимизирующий перемещение элементов и старается обновить и повторно использовать как можно больше элементов правильного типа “на местах”. А если ключ указан, Vue изменяет порядок следования элементов, основываясь на изменении порядка ключей. Элементы, соответствующие ключам, которых больше нет, Vue всегда уничтожает.
Но он мне не совсем понятен, хотелось бы по подробнее и более понятное разъеснение и смысл этого атрибута и как он работает. Заранее спасибо за подробное разъяснение вопроса !
  • Вопрос задан
  • 10861 просмотр
Комментировать
Подписаться 4 Простой Комментировать
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Не знаю, что ещё можно добавить к уже сказанному в документации. Думаю, наглядная демонстрация поможет лучше понять, что к чему.

Пример номер раз - key нет. Пример номер два - key есть. Тыкаем кнопочку и смотрим, что происходит со значениями в инпутах. В первом случае они остаются на месте, во втором начинают ездить по кругу (аналогично элементам массива). Почему так? Возвращаемся к процитированному вами отрывку из документации, и осознаём, что в первом случае

Vue использует алгоритм, минимизирующий перемещение элементов

а во втором

Vue изменяет порядок следования элементов, основываясь на изменении порядка ключей
Ответ написан
12 комментариев
12 комментариев
Пригласить эксперта
Ответы на вопрос 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Если вы определяете этот атрибут для элемента, то vue точно знает когда нужно обновить этот элемент. Т.е. если вы поменяете ключ, то vue точно удалит старый элемент и создаст новый.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend developer (middle/senior)
//stablecode
от 210 000 ₽
Senior Frontend VueJS (частичная занятость)
Онград+
от 125 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Flutter developer
24 апр. 2024, в 13:10
400000 руб./за проект
Редактирование плагина на WP (дизайн, доп поля)
24 апр. 2024, в 13:01
5000 руб./за проект
Верстка двух страниц
24 апр. 2024, в 13:00
3000 руб./за проект
Ещё заказы