Atribut key dalam Vue

Apabila Vue mengemas kini senarai elemen, yang dipaparkan menggunakan arahan v-for, secara lalai, strategi kemas kini "in-place" digunakan. Jika susunan elemen array atau objek berubah, Vue tidak akan mengalihkan elemen DOM, sebaliknya hanya mengemas kini setiap elemen "in-place" untuk memaparkan data baru pada indeks yang sepadan.

Untuk memberitahu Vue bagaimana untuk menentukan identiti setiap elemen, dan dengan itu menggunakan semula dan menyusun elemen yang sedia ada, adalah perlu untuk menentukan atribut unik key untuk setiap elemen.

Tanpa kunci, Vue menggunakan algoritma yang meminiimumkan pergerakan elemen dan akan berusaha sebanyak mungkin untuk mengubah/menggunakan semula elemen daripada jenis yang sama. Apabila kunci digunakan, elemen akan disusun semula mengikut perubahan dalam susunan kunci, dan elemen yang kuncinya sudah tiada, akan sentiasa dipadamkan/dimusnahkan.

Adalah disyorkan untuk sentiasa menentukan atribut key dengan v-for, kecuali dalam kes di mana kandungan lelaran DOM adalah mudah, atau apabila anda secara sedar bergantung pada strategi kemas kini lalai untuk meningkatkan prestasi.

Secara umumnya, persoalan menambah kunci timbul apabila mengulangi array objek. Dalam kes ini, salah satu kunci objek adalah medan unik, contohnya, id:

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

Mari kita ulangi array yang diberikan menggunakan gelung, dengan menentukan kunci yang sepadan:

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

Ulangi array berikut menggunakan gelung dan paparkan nama produk dalam bentuk senarai ul:

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