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

Question

[FilatovNikita]

Здравствуйте прочитал кусок из документации

Атрибут key помогает алгоритму работы с виртуальным DOM определить, какие ноды соответствует какой строке данных. Если этот атрибут не указан, Vue использует алгоритм, минимизирующий перемещение элементов и старается обновить и повторно использовать как можно больше элементов правильного типа “на местах”. А если ключ указан, Vue изменяет порядок следования элементов, основываясь на изменении порядка ключей. Элементы, соответствующие ключам, которых больше нет, Vue всегда уничтожает.

Но он мне не совсем понятен, хотелось бы по подробнее и более понятное разъеснение и смысл этого атрибута и как он работает. Заранее спасибо за подробное разъяснение вопроса !

Answer 1

[0xD34F]

Не знаю, что ещё можно добавить к уже сказанному в документации. Думаю, наглядная демонстрация поможет лучше понять, что к чему.

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

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

а во втором

Vue изменяет порядок следования элементов, основываясь на изменении порядка ключей

Comments

[FilatovNikita]

Спасибо большое!

[vism]

+1 осознал)

[FilatovNikita]

А вот еще вопрос, это же связано только с перемещением элементов, но не с добавление и удалением ведь ? или и с тем и с тем ?

[0xD34F]

FilatovNikita, вот ещё пара примеров, с удалением/добавлением - key нет, key есть. И опять присутствует некая разница в поведении.

[FilatovNikita]

0xD34F, спасибо большое ещё раз!

[CoyoteSS]

0xD34F, естественно функция работать не будет.
...this.items.map(n => n.id)) + 1
вы здесь обращаетесь к свойству ЧИСЛА, у чисел в JS не бывает свойств.

[0xD34F]

moreleaksILoveMS, естественно, всё работает, так как и должно. Вы подумайте ещё разок над тем, что делает код. Никакого обращения к свойству числа там нет.

[CoyoteSS]

0xD34F, n.id это по вашему что?

[0xD34F]

moreleaksILoveMS, встречный вопрос: n - это что по-вашему?

[CoyoteSS]

0xD34F, объект со свойствами id

[0xD34F]

moreleaksILoveMS, а, то есть, id - всё-таки свойство объекта, а не какого-то там числа, как вам казалось ранее. Вот и разобрались.

[CoyoteSS]

0xD34F, когда первый раз читал код, думал что это число, все допускают ошибки и это нормально, не вижу ничего в этом такого, а что?

Answer 2

[Evgeny Kulakov]

Если вы определяете этот атрибут для элемента, то vue точно знает когда нужно обновить этот элемент. Т.е. если вы поменяете ключ, то vue точно удалит старый элемент и создаст новый.

Comments

[FilatovNikita]

Спасибо большое!