A key attribútum Vue-ban

Amikor a Vue frissíti a v-for direktívával megjelenített elemek listáját, alapértelmezetten egy "helyben történő" frissítési stratégiát alkalmaz. Ha a tömb vagy objektum elemeinek sorrendje megváltozik, a Vue nem fogja mozgatni a DOM elemeket, hanem egyszerűen minden elemet "helyben" frissít, hogy az megjelenítse az új adatokat a megfelelő indexen.

Ahhoz, hogy a Vue számára jelezzük, hogyan azonosítsa minden egyes elem identitását, és így újra felhasználja és átrendezi a meglévő elemeket, minden elemhez egy egyedi key attribútumot kell megadni.

Kulcsok nélkül a Vue egy olyan algoritmust használ, amely minimalizálja az elemek mozgatását és a lehető legnagyobb mértékben igyekszik megváltoztatni/újrafelhasználni az azonos típusú elemeket. Kulcsok használatakor az elemek a kulcsok sorrendjének változásának megfelelően lesznek átrendezve, az onnan hiányzó kulcsokkal rendelkező elemek pedig mindig eltávolításra/-pusztításra kerülnek.

Javasolt mindig megadni a key attribútumot a v-for mellett, kivéve azokat az eseteket, amikor a bejárható DOM tartalom egyszerű, vagy szándékosan az alapértelmezett frissítési stratégiára támaszkodunk a teljesítmény javítása érdekében.

Általában a kulcsok hozzáadásának kérdése akkor merül fel, amikor objektumok tömbjét járjuk be. Ebben az esetben az objektum egyik kulcsa egy egyedi mező, például a id:

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

Járjuk be a megadott tömböt egy ciklussal, megadva a megfelelő kulcsokat:

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