Vue'da key Özniteliği

Vue, v-for direktifi ile oluşturulmuş bir öğe listesini güncellerken, varsayılan olarak "yerinde" güncelleme stratejisini kullanır. Dizi veya nesnenin eleman sırası değişirse, Vue DOM elemanlarını taşımaz, bunun yerine her bir elemanı, karşılık gelen indeksteki yeni verileri göstermesi için "yerinde" günceller.

Vue'ya her bir öğenin kimliğini nasıl tanıyacağını ve böylece mevcut öğeleri yeniden kullanıp sıralayacağını bildirmek için, her öğe için benzersiz bir key özniteliği belirtmek gerekir.

Anahtarlar olmadan Vue, öğe hareketlerini en aza indiren ve aynı türdeki öğeleri mümkün olduğunca değiştirmeye/tekrar kullanmaya çalışan bir algoritma kullanır. Anahtarlar kullanıldığında, öğeler anahtar sırasındaki değişikliğe göre yeniden sıralanır ve artık mevcut olmayan anahtarlara sahip öğeler her zaman kaldırılır/yok edilir.

DOM içeriğinin basit olduğu veya performansı artırmak için bilinçli olarak varsayılan güncelleme stratejisine güvendiğiniz durumlar dışında, v-for ile birlikte her zaman key özniteliğini belirtmeniz önerilir.

Genellikle, anahtar ekleme sorunu bir nesne dizisini yineleme sırasında ortaya çıkar. Bu durumda, nesnenin anahtarlarından biri benzersiz bir alandır, örneğin id:

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

Verilen diziyi bir döngü ile gezelim ve ilgili anahtarları belirterek:

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

Aşağıdaki diziyi bir döngü ile gezin ve ürün adlarını bir ul listesi olarak görüntüleyin:

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