Атрибутот key во Vue

При ажурирање на Vue на список на елементи, исцртани со директивата v-for, стандардно се користи стратегија за ажурирање "на место". Ако редоследот на елементите од низата или објектот се промени, Vue нема да ги преместува DOM елементите, туку едноставно ќе ги ажурира секој елемент "на место" за да го прикаже новите податоци соодветно на индексот.

За да му помогнете на Vue да одреди идентитетот на секој елемент, и, на тој начин, да ги повторно користи и подреди постоечките елементи, неопходно е да се назначи уникален атрибут key за секој елемент.

Без клучеви, Vue користи алгоритам кој го минимизира поместувањето на елементи и ќе се обиде максимално да ги менува/повторно користи елементи од ист тип. Со користење на клучеви, елементите ќе се преуредуваат во согласност со промената на редоследот на клучевите, а елементите чии клучеви веќе отсуствуваат, ќе бидат секогаш отстранети/уништени.

Се препорачува секогаш да се назначува атрибутот key со v-for, освен во случаи кога содржината што се итерира е едноставна, или кога свесно се потпирате на стандардната стратегија за ажурирање за подобрување на перформансите.

Општо земено, прашањето за додавање клучеви се појавува при преминување низ низа од објекти. Во овој случај, еден од клучевите на објектот е уникално поле, на пример, 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',
			},
		]
	}
}