แอตทริบิวต์ key ใน Vue

เมื่อ Vue อัปเดตรายการองค์ประกอบ ที่เรนเดอร์ด้วยไดเรกทีฟ v-for โดยค่าเริ่มต้นจะใช้กลยุทธ์การอัปเดต "ในตำแหน่งเดิม" หากลำดับขององค์ประกอบในอาร์เรย์ หรืออ็อบเจ็กต์เปลี่ยนแปลง Vue จะไม่ ย้ายองค์ประกอบ DOM แต่จะเพียงอัปเดต แต่ละองค์ประกอบ "ในตำแหน่งเดิม" เพื่อให้แสดง ข้อมูลใหม่ตามดัชนีที่เกี่ยวข้อง

เพื่อบอก Vue ถึงวิธีการระบุอัตลักษณ์ ของแต่ละองค์ประกอบ และดังนั้น จึงนำกลับมาใช้ใหม่และจัดเรียง องค์ประกอบที่มีอยู่ จำเป็นต้องระบุ แอตทริบิวต์ที่ไม่ซ้ำกัน key สำหรับแต่ละ องค์ประกอบ

หากไม่มีคีย์ Vue จะใช้อัลกอริธึมที่ ลดการเคลื่อนย้ายองค์ประกอบและ จะพยายามอย่างสูงสุดที่จะ เปลี่ยนแปลง/นำกลับมาใช้องค์ประกอบประเภทเดียวกัน เมื่อใช้คีย์ องค์ประกอบ จะถูกจัดเรียงลำดับใหม่ตาม การเปลี่ยนแปลงลำดับของคีย์ และ องค์ประกอบที่มีคีย์หายไปจะ ถูกลบออก/ทำลายเสมอ

แนะนำให้ระบุแอตทริบิวต์ 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',
			},
		]
	}
}