Atrybut key w Vue

Podczas aktualizowania przez Vue listy elementów, wyrenderowanej za pomocą dyrektywy v-for, domyślnie używana jest strategia aktualizacji "w miejscu". Jeśli kolejność elementów tablicy lub obiektu ulegnie zmianie, Vue nie przeniesie elementów DOM, a po prostu zaktualizuje każdy element "w miejscu", tak aby wyświetlał nowe dane według odpowiedniego indeksu.

Aby podpowiedzieć Vue, jak identyfikować tożsamość każdego elementu, i tym samym ponownie wykorzystywać i porządkować istniejące elementy, należy określić unikalny atrybut key dla każdego elementu.

Bez kluczy Vue używa algorytmu, który minimalizuje przenoszenie elementów i będzie starał się w maksymalnym stopniu zmieniać/ponownie wykorzystywać elementy tego samego typu. Przy użyciu kluczy elementy będą reordynowane zgodnie ze zmianą kolejności kluczy, a elementy, których klucze już nie występują, będą zawsze usuwane/niszczone.

Zaleca się zawsze określać atrybut key z v-for, z wyjątkiem przypadków gdy iterowana zawartość DOM jest prosta, lub gdy świadomie polegasz na domyślnej strategii aktualizacji w celu poprawy wydajności.

Zazwyczaj kwestia dodawania kluczy pojawia się przy iteracji tablicy obiektów. W tym przypadku jednym z kluczy obiektu jest unikalne pole, na przykład, id:

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

Przejdźmy pętlą po podanej tablicy, określając odpowiednie klucze:

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',
      },
    ]
  }
}