# Атрибут key в Vue

При обновлении Vue списка элементов, отрисованного директивой `v-for`, по умолчанию используется стратегия обновления "на месте". Если порядок элементов массива или объекта изменился, Vue не станет перемещать элементы DOM, а просто обновит каждый элемент "на месте", чтобы он отображал новые данные по соответствующему индексу.

Чтобы подсказать Vue, как определять идентичность каждого элемента, и, таким образом, переиспользовать и упорядочивать существующие элементы, необходимо указать уникальный атрибут `key` для каждого элемента.

Без ключей Vue использует алгоритм, который минимизирует перемещения элементов и по-максимуму будет стараться изменять/переиспользовать элементы одного типа. При использовании ключей элементы будут переупорядочиваться в соответствии с изменением порядка следования ключей, а элементы, чьи ключи уже отсутствуют, будут всегда удаляться/уничтожаться.

Рекомендуется всегда указывать атрибут `key` с `v-for`, кроме случаев когда итерируемое содержимое DOM простое, или когда сознательно полагаетесь на стратегию обновления по умолчанию для улучшения производительности.

Как правило вопрос добавления ключей встает при переборе массива объектов. В этом случае одним из ключей объекта является уникальное поле, например, `id`:

`data() { return { users: [ { id: 1, name: 'name1', surn: 'surn1', }, { id: 2, name: 'name2', surn: 'surn2', }, { id: 3, name: 'name3', surn: 'surn3', }, ] } }`

Давайте переберем приведенный массив циклом, указав соответствующие ключи:

`<template> <p v-for="user in users" :key="user.id"> {{ user.name }} {{ user.surn }} </p> </template>`

Переберите циклом следующий массив и выведите названия продуктов в виде списка `ul`:

`data() { return { products: [ { id: 1, name: 'product1', }, { id: 2, name: 'product2', }, { id: 3, name: 'product3', }, ] } }`
← →
↑