Чем отличается key="id" от :key="id" во Vue?

Question

key="id" передаёт строку "id", а :key="id" передаёт значение переменной id. В первом случае все элементы получают одинаковый ключ. Во втором — каждый элемент получает свой уникальный ключ. Для списков подходит только динамический вариант. Это критично для корректного обновления DOM.

YeaHub · Accepted Answer

Различие между key="id" и :key="id" является частным случаем общего правила биндинга атрибутов во Vue.Статические и динамические атрибутыВо Vue:атрибут без : трактуется как строкаатрибут с : вычисляется как JavaScript-выражениеРазбор примера

Здесь каждый элемент получает одинаковый key.

Здесь key берётся из данных конкретного элемента.Почему это критичноКорректный key:обеспечивает стабильное сопоставление элементовпредотвращает ошибки состоянияоптимизирует обновление DOMКраткий выводДля списков во Vue всегда нужно использовать динамический :key, а не строковый key.