Vue-ում key ատրիբուտը

Vue-ի կողմից v-for դիրեկտիվով պատկերված տարրերի ցուցակը թարմացնելիս լռելյայն օգտագործվում է «տեղում» թարմացման ստրատեգիա: Եթե զանգվածի կամ օբյեկտի տարրերի հերթականությունը փոխվել է, Vue-ն չի տեղափոխի DOM տարրերը, այլ պարզապես կթարմացնի յուրաքանչյուր տարրը «տեղում», որպեսզի այն ցուցադրի համապատասխան ինդեքսով նոր տվյալները:

Որպեսզի Vue-ին հուշել, թե ինչպես որոշել յուրաքանչյուր տարրի նույնականությունը, և այդպիսով վերաօգտագործել և դասավորել գոյություն ունեցող տարրերը, անհրաժեշտ է յուրաքանչյուր տարրի համար նշել ունիկալ key ատրիբուտ:

Առանց բանալիների Vue-ն օգտագործում է ալգորիթմ, որն նվազագույնի է հասցնում տարրերի տեղափոխությունը և առավելագույնս կփորձի փոփոխել/վերաօգտագործել նույն տիպի տարրերը: Բանալիների օգտագործման դեպքում տարրերը կվերադասավորվեն՝ համապատասխանելով բանալիների հերթականության փոփոխությանը, իսկ այն տարրերը, որոնց բանալիներն այլևս բացակայում են, միշտ կհեռացվեն/կոչնչացվեն:

Խորհուրդ է տրվում միշտ նշել key ատրիբուտը v-for-ի հետ, բացառությամբ այն դեպքերի, երբ DOM-ի կրկնվող բովանդակությունը պարզ է, կամ երբ գիտակցաբար ապավինում եք լռելյայն թարմացման ստրատեգիային՝ արտադրողականությունը բարելավելու համար:

Որպես կանոն, բանալիների ավելացման հարցը ծագում է օբյեկտների զանգվածի վրա կրկնություն կատարելիս: Այս դեպքում օբյեկտի բանալիներից մեկը ունիկալ դաշտ է, օրինակ՝ id:

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

Եկեք կրկնենք տրված զանգվածը ցիկլով, նշելով համապատասխան բանալիները:

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

Կրկնեք ցիկլով հետևյալ զանգվածը և արտադրանքի անվանումները ցուցադրեք որպես ցուցակ ul-ի մեջ:

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