Атрибут 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',
},
]
}
}