Key-attribuuti Vuesa

Kun Vue päivittää v-for-direktiivillä renderöityjä elementtilistoja, se käyttää oletusarvoisesti "paikalla"-päivitysstrategiaa. Jos taulukon tai objektin elementtien järjestys muuttuu, Vue ei siirrä DOM-elementtejä, vaan yksinkertaisesti päivittää jokaisen elementin "paikalla" niin, että se näyttää uudet dataa vastaavassa indeksissä.

Osoittaakseen Vue:lle, kuinka tunnistaa kunkin elementin identiteetti, ja näin ollen uusiokäyttää ja järjestää olemassa olevia elementtejä, on määritettävä yksilöllinen key-attribuutti jokaiselle elementille.

Ilman avaimia Vue käyttää algoritmia, joka minimoi elementtien siirtämisen ja yrittää maksimaalisesti muuttaa/uusiokäyttää samantyyppisiä elementtejä. Kun avaimia käytetään, elementit järjestetään uudelleen vastaamaan avainten järjestyksen muutosta, ja elementit, joiden avaimet eivät enää ole olemassa, poistetaan/tuhotaan aina.

On suositeltavaa aina määrittää key-attribuutti v-for:n kanssa, paitsi tapauksissa, joissa iteroitava DOM-sisältö on yksinkertaista, tai kun tietoisesti luotat oletuspäivitysstrategiaan suorituskyvyn parantamiseksi.

Yleensä avainten lisäämisen kysymys nousee esille objektitaulukon läpikäynnin yhteydessä. Tässä tapauksessa yksi objekten avaimista on yksilöllinen kenttä, esimerkiksi id:

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

Käydään läpi annettu taulukko silmukalla, määrittäen vastaavat avaimet:

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