Vue да key атрибути

Vue да элементлар рўйхати, v-for директиваси орқали чиқарилган бўлса, оддатий ҳолда "жойида" янгілаш стратегияси қўлланилади. Агар massiv ёки объект элементларининг тартиби ўзгарган бўлса, Vue DOM элементларини кўчирмайди, балки ўрнида ҳар бир элементни мос индекс буйича янги маълумотларни кўрсатиш учун яхшилаб янади.

Vue га ҳар бир элементнинг кимлигини аниқлаш учун қандай ёрдам бериш, ва шу тариқа мавжуд элементларни қайта ишлатиш ва тартибга солиш учун, ҳар бир элемент учун бир мартали key атрибутини кўрсатиш зарур.

Калитларсиз Vue элементларни кўчиришни minimallashtiradigan ва бир хил турдаги элементларни ўзгартириш/қайта ишлатишга максимал ҳаракат қиладиган алгоритмдан фойдаланади. Калитлар ишлатилганда элементлар калитлар тартибининг ўзгаришига мос равишда қайта тартибга соланади, ва калитлари энди йўқ бўлган элементлар doim ўчирилади/йўқ қилинади.

v-for билан key атрибутини doim кўрсатиш tavsiya etiladi, магар DOM итерируем mazmuni oddiy бўлган ҳолларда, ёки сиз оддатий янгілаш стратегиясига ishonch билан ishonib, унинг samaradorligini oshirish учун тайёр бўлган ҳолларда мустасно.

Одатда калитларни қўшиш масаласи объектлар massiviни aylantirishda кўтарилади. Бу ҳолатда объектнинг калитларидан бири бир маратли майдон, masalan, id:

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

Келтирилган massivни aylana босиб, мос калитларни кўрсатамиз:

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

Quyidagi massivni aylana босиб ва mahsulot номларини ul рўйхат шаклида чиқаринг:

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