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:

data() {
	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:

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

Käy läpi seuraava taulukko silmukalla ja tulosta tuotteiden nimet listana ul:

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