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',
			},
		]
	}
}