Атрибут key във Vue

При актуализиране на списък с елементи от Vue, рендерирани от директивата v-for, по подразбиране се използва стратегия за актуализиране "на място". Ако редът на елементите в масива или обекта се промени, Vue няма да премества елементите в DOM, а просто ще актуализира всеки елемент "на място", за да показва новите данни на съответния индекс.

За да подскажете на Vue как да определя идентичността на всеки елемент, и по този начин да използва повторно и подрежда съществуващите елементи, е необходимо да се посочи уникален атрибут key за всеки елемент.

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

Препоръчително е винаги да се указва атрибут key с v-for, освен в случаите, когато съдържанието, което се итерира в DOM, е просто, или когато съзнателно разчитате на стратегията за актуализиране по подразбиране за подобряване на производителността.

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

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

Нека да итерираме дадения масив с цикъл, като посочим съответните ключове:

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

javascriptdata() {
  return {
    products: [
      {
        id: 1,
        name: 'product1',
      },
      {
        id: 2,
        name: 'product2',
      },
      {
        id: 3,
        name: 'product3',
      },
    ]
  }
}