Kivumishi key katika Vue

Wakati wa kusasisha orodha ya vipengele ya Vue, iliyochorwa kwa kuelekeza v-for, kwa msingi mkakati wa kusasisha "mahali palepale" unatumika. Ikiwa mpangilio wa vipengele vya safu au kitu umebadilika, Vue haitahimili kusogeza vipengele vya DOM, badala yake itasasisha kila kipengele "mahali palepale", ili kionyeshe data mpya kulingana na faharasa inayofanana.

Ili kumwonyesha Vue, jinsi ya kutambua kitambulisho cha kila kipengele, na, hivyo basi, kutumia tena na kupanga vipengele vilivyopo, ni muhimu kutaja kivumishi cha kipekee key kwa kila kipengele.

Bila funguo, Vue hutumia algoriti ambayo inapunguza usogezaji wa vipengele na kwa upeo wa juu itajitahidi /kubadilisha/kutumia tena vipengele vya aina moja. Wakati wa kutumia funguo, vipengele vitawekwa upya ili kulingana na mabadiliko ya mpangilio wa funguo, na vipengele ambavyo funguo zake hazipo tena, vita kufutwa/kuharibiwa kila wakati.

Inapendekezwa kila wakati kutaja kivumishi key na v-for, isipokuwa kwa matukio wakati yaliyomo yanayorejeshwa DOM ni rahisi, au wakati unaotegemea kwa makusudi mkakati wa kusasisha kwa msingi ili kuboresha utendaji.

Kwa ujumla swali la kuongeza funguo hujitokeza wakati wa kupitia safu ya vitu. Katika hili kesi moja ya funguo za kitu ni sehemu ya kipekee, kwa mfano, id:

data() {
	return {
		watumiaji: [
			{
				id: 1,
				jina: 'jina1',
				uananchi: 'uananchi1',
			},
			{
				id: 2,
				jina: 'jina2',
				uananchi: 'uananchi2',
			},
			{
				id: 3,
				jina: 'jina3',
				uananchi: 'uananchi3',
			},
		]
	}
}

Wacha tutupitie safu iliyotajwa kwa mzunguko, ukiwa umeonyesha funguo zinazofanana:

<template>
	<p v-for="mtumiaji in watumiaji" :key="mtumiaji.id">
		{{ mtumiaji.jina }}
		{{ mtumiaji.uananchi }}
	</p>
</template>

Tupitie kwa mzunguko safu ifuatayo na onyesha majina ya bidhaa kwa mfumo wa orodha ul:

data() {
	return {
		bidhaa: [
			{
				id: 1,
				jina: 'bidhaa1',
			},
			{
				id: 2,
				jina: 'bidhaa2',
			},
			{
				id: 3,
				jina: 'bidhaa3',
			},
		]
	}
}