Vue-daky key atributy

Vue, v-for direktiwasy bilen çyzylyp görkezilen elementleriň sanawyny täzeleşdirýän wagty, deslapky ýagdaýda "ýerinde" täzelenme strategiýasyny ulanýar. Eger massiw ýa-da obýektiň elementleriniň tertibi üýtgese, Vue DOM elementlerini ýerini üýtgetmez, ýöne her elementi degişli indeks boýunça täze maglumatlary görkezmek üçin "ýerinde" ýönekeý täzeler.

Vue-a her bir elementiň häsiýetini kesgitlemek we, şeýlelik bilen, bar bolan elementleri gaýtadan ulanmak we tertiplemek üçin nädip görkezmeli bolsa, her element üçin takyk key atributyny görkezmek zerur.

Açarlar bolmazdan, Vue elementleriň hereketini iň aşak derejä ýetirýän we bir görnüşli elementleri üýtgetmek/gaýtadan ulanmak üçin iň köp synanyşjak algoritmy ulanýar. Açarlary ulanmak bilen elementler açarlaryň yzygiderliliğiniň üýtgemegine laýyklykda gaýtadan tertiplener we açarlary artyk bolmadyk elementler hemişe aýrylar/ýok ediler.

v-for bilen key atributyny hemişe görkezmek maslahat berilýär, ýöne DOM-daky iterirlenen mazmun ýönekeý bolanda ýa-da öndürijiligi gowulandyrma üçin deslapky täzelenme strategiýasyna bil baglanýan wagtyňyzdan başga.

Adatça, açarlary goşmak meselesi obýektleriň massiwini aýlamakda gelip çykýar. Bu ýagdaýda obýektiň açarlarynyň biri takyk meýdan, meselem, id bolýar:

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

Görkezilen massiwy aýlaw bilen aýlanyp, degişli açarlary görkezeliň:

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

Aşakdaky massiwy aýlaw bilen aýlanyp we önümleriň adlaryny ul sanawy görnüşinde çykaryň:

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