Vue key atribūts

Atjauninot Vue elementu sarakstu, ko renderē v-for direktīva, pēc noklusējuma tiek izmantota "vietā" atjaunināšanas stratēģija. Ja masīva vai objekta elementu secība ir mainījusies, Vue nepārvietos DOM elementus, bet vienkārši atjauninās katru elementu "vietā", lai tas atspoguļotu jaunos datus atbilstoši attiecīgajam indeksam.

Lai palīdzētu Vue noteikt katra elementa identitāti, un tādējādi atkārtoti izmantot un sakārtot esošos elementus, ir jānorāda unikāls key atribūts katram elementam.

Bez atslēgām Vue izmanto algoritmu, kas minimizē elementu pārvietošanu un pēc iespējas centīsies mainīt/atkārtoti izmantot viena veida elementus. Izmantojot atslēgas, elementi tiks pārkārtoti atbilstoši atslēgu secības izmaiņām, bet elementi, kuru atslēgas vairs nav, tiks vienmēr izdzēsti/iznīcināti.

Ieteicams vienmēr norādīt key atribūtu kopā ar v-for, izņemot gadījumus, kad iterējamais DOM saturs ir vienkāršs, vai kad apzināti paļaujaties uz noklusējuma atjaunināšanas stratēģiju, lai uzlabotu veiktspēju.

Parasti jautājums par atslēgu pievienošanu rodas atkārtojot objektu masīvu. Šajā gadījumā viena no objekta atslēgām ir unikāls lauks, piemēram, id:

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

Atkārtosim doto masīvu ar ciklu, norādot atbilstošās atslēgas:

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

Atkārtojiet ar ciklu šādu masīvu un izvadiet produktu nosaukumus saraksta veidā ul:

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