Vue-də key atributu

Vue tərəfindən v-for direktivi ilə çəkilmiş elementlər siyahısı yenilənəndə, standart olaraq "yerində" yeniləmə strategiyası istifadə olunur. Əgər massivin və ya obyektin elementlərinin sırası dəyişibsə, Vue DOM elementlərini köçürməyəcək, əksinə hər bir elementi müvafiq indeks üzrə yeni məlumatları göstərmək üçün sadəcə "yerində" yeniləyəcək.

Vue-ə hər bir elementin eyniliyini necə müəyyən edəcəyini, və beləliklə mövcud elementləri yenidən istifadə etməyi və sıralamağı bildirmək üçün, hər bir element üçün unikal key atributunu göstərmək lazımdır.

Açarlar olmadan, Vue element hərəkətlərini minimuma endirən və eyni tipdəki elementləri dəyişdirməyi/yenidən istifadə etməyi maksimum dərəcədə səy göstərən bir alqoritmdən istifadə edir. Açarlar istifadə edildikdə, elementlər açarların sırasının dəyişməsinə uyğun olaraq yenidən sıralanacaq və açarları artıq mövcud olmayan elementlər həmişə silinəcək/məhv ediləcək.

DOM-da iterasiya edilən məzmun sadə olduqda və ya performansı yaxşılaşdırmaq üçün standart yeniləmə strategiyasına qəsdən etibar etdiyiniz hallar istisna olmaqla, v-for ilə həmişə key atributunu göstərmək tövsiyə olunur.

Ümumiyyətlə, açarların əlavə edilməsi məsələsi obyektlər massivini iterasiya edərkən qarşımıza çıxır. Bu halda, obyektin açarlarından biri unikal sahədir, məsələn, id:

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

Gəlin göstərilən massivi dövrə ilə iterasiya edək, müvafiq açarları göstərək:

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

Aşağıdakı massivi dövrə ilə iterasiya edin və məhsulların adlarını ul siyahısı şəklində çıxarın:

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