Атрибут key в цикле в Vue

Атрибут key в цикле v-for, это уникальный идентификатор элемента, по которому выполняется цикл. Он помогает Vue оптимизировать повторный рендеринг элементов при изменении списка.

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

Избежать неэффективного перерисовывания всех элементов при изменении списка. Вместо этого Vue может обновить только те элементы, которые изменились
Переупорядочивать элементы в соответствии с изменением порядка следования ключей
Удалять элементы, чьи ключи уже отсутствуют

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

Ключ в данных

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

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

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

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

Ключ из номера итарации

App.vuedata()
{
    return {
        users: [
            {
                name: 'name1',
                surn: 'surn1',
            },
            {
                name: 'name2',
                surn: 'surn2',
            },
            {
                name: 'name3',
                surn: 'surn3',
            },
        ]
    }
}

App.vue<template>
    <p v-for="(user, key) in users" :key="key">
        {{ user.name }}
        {{ user.surn }}
    </p>
</template>