Vue-da key atributi

Vue tomonidan v-for direktivasi orqali chizilgan elementlar ro'yxati yangilanganda, standart yangilash strategiyasi "o'rnida" yangilash hisoblanadi. Agar massiv yoki ob'ekt elementlarining tartibi o'zgarsa, Vue DOM elementlarini ko'chirmaydi, balki har bir elementni mos indeks bo'yicha yangi ma'lumotlarni aks ettirish uchun "o'rnida" yangilaydi.

Vue ga har bir elementning identifikatsiyasini qanday aniqlashni va shu orqali mavjud elementlarni qayta ishlatish va tartiblashni ko'rsatish uchun har bir element uchun noyob key atributini ko'rsatish kerak.

Kalitsiz Vue elementlarning ko'chirilishini minimallashtiradigan va bir xil turdagi elementlarni o'zgartirish/qayta ishlatishga maksimal harakat qiladigan algoritmdan foydalanadi. Kalitlardan foydanganda, elementlar kalitlar tartibidagi o'zgarishlarga mos ravishda qayta tartiblanadi va kalitlari endi mavjud bo'lmagan elementlar har doim o'chiriladi/yonib o'chadi.

v-for bilan key atributini har doim ko'rsatish tavsiya etiladi, agar DOM dagi iteratsiya qilinadigan tarkib oddiy bo'lmasa yoki unumdorlikni oshirish uchun standart yangilash strategiyasiga ataylab tayanayotgan bo'lmasangiz.

Odatda, kalitlarni qo'shish masalasi ob'ektlar massivini aylantirishda paydo bo'ladi. Bunday holda, ob'ektning kalitlaridan biri noyob maydon, masalan, id bo'ladi:

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

Keling, berilgan massivni tsikl bilan aylantiramiz va mos kalitlarni ko'rsatamiz:

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

Quyidagi massivni tsikl bilan aylantiring va mahsulot nomlarini ul ro'yxati shaklida chiqaring:

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