key ატრიბუტი Vue-ში

როდესაც Vue ახლდება ელემენტების სია, რომელიც გამოსახულია v-for დირექტივით, სტანდარტულად გამოიყენება "in-place" განახლების სტრატეგია. თუ მასივის ან ობიექტის ელემენტების რიგი შეიცვალა, Vue არ გადაიტანს DOM ელემენტებს, არამედ უბრალოდ განაახლებს თითოეულ ელემენტს "in-place", რათა ის ასახავდეს ახალ მონაცემებს შესაბამისი ინდექსის მიხედვით.

იმისთვის, რომ მივუთითოთ Vue-ს, როგორ განსაზღვროს თითოეული ელემენტის უნიკალურობა და, ამრიგად, გამოიყენოს არსებული ელემენტები და დაალაგოს ისინი, აუცილებელია მივუთითოთ უნიკალური ატრიბუტი key თითოეული ელემენტისთვის.

საკეტების გარეშე Vue იყენებს ალგორითმს, რომელიც მინიმუმამდე აყენებს ელემენტების გადატანას და მაქსიმალურად შეეცდება შეცვალოს/გამოიყენოს იგივე ტიპის ელემენტები. საკეტების გამოყენებისას ელემენტები გადაიწortadება საკეტების რიგის ცვლილების მიხედვით, ხოლო ელემენტები, რომელთა საკეტები უკვე არ არის, ყოველთვის წაიშლება/განადგურდება.

რეკომენდებულია ყოველთვის მივუთითოთ key ატრიბუტი v-for-თან ერთად, გარდა იმ შემთხვევებისა, როდესაც 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',
			},
		]
	}
}