Vue-те key атрибуты

Vue тізім элементтерін жаңартқан кезде, v-for директивасымен көрсетілген, әдепкі бойынша "орнында" жаңарту стратегиясы қолданылады. Егер массивтің немесе объектің элементтерінің реті өзгерсе, Vue DOM элементтерін жылжытпай, әдетте, сәйкес индекс бойынша жаңа деректерді көрсету үшін әрбір элементті "орнында" жаңартады.

Vue-ге әрбір элементтің сәйкестігін анықтауға және, осылайша, бар элементтерді қайта пайдалануға және реттеуге көмектесу үшін әрбір элемент үшін бірегей key атрибутын көрсету қажет.

Кілттерсіз Vue элементтерді жылжытуды азайтатын алгоритмді қолданады және бір түрдегі элементтерді мүмкіндігінше өзгертуге/қайта пайдалануға тырысады. Кілттерді қолданған кезде элементтер кілттердің ретінің өзгеруіне сәйкес қайта реттеледі, ал кілттері жоғалған элементтер әрқашан жойылады/шығарылады.

v-for-пен әрқашан key атрибутын көрсету ұсынылады, тек 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',
			},
		]
	}
}