Что произойдёт, если не использовать динамический :key, а передать строку?

Question

Если передать строку в key без :, все элементы списка получат одинаковый ключ. Vue не сможет различать элементы между собой. Это ломает алгоритм обновления DOM. В результате возможны визуальные и логические ошибки. Такой key фактически бесполезен.

YeaHub · Accepted Answer

Во Vue наличие : перед key определяет, как интерпретируется значение.Как Vue читает keyСравним два варианта:

В первом случае key="id" — это обычная строка "id".Во втором — значение берётся из данных.Последствия статического keyЕсли все элементы имеют одинаковый key:Vue считает их одним и тем же элементомDOM-узлы переиспользуются некорректносостояние компонентов путаетсяПочему ошибка не всегда заметнаПроблема может проявиться только:при изменении порядка элементовпри добавлении или удалении элементовпри работе с формами и анимациямиКраткий выводkey без : превращается в строковый литерал и делает список логически некорректным.