Thuộc tính key trong Vue

Khi Vue cập nhật danh sách các phần tử, được kết xuất bằng chỉ thị v-for, theo mặc định, nó sử dụng chiến lược cập nhật "tại chỗ". Nếu thứ tự của các phần tử trong mảng hoặc đối tượng thay đổi, Vue sẽ không di chuyển các phần tử DOM, mà chỉ cập nhật từng phần tử "tại chỗ" để phần tử đó hiển thị dữ liệu mới theo chỉ mục tương ứng.

Để gợi ý cho Vue cách xác định danh tính của từng phần tử, và qua đó, tái sử dụng và sắp xếp lại các phần tử hiện có, cần phải chỉ định một thuộc tính duy nhất key cho mỗi phần tử.

Nếu không có key, Vue sử dụng một thuật toán giúp tối thiểu hóa việc di chuyển các phần tử và sẽ cố gắng hết sức để thay đổi/tái sử dụng các phần tử cùng loại. Khi sử dụng key, các phần tử sẽ được sắp xếp lại theo sự thay đổi về thứ tự của các key, và các phần tử có key không còn tồn tại sẽ luôn bị xóa/hủy.

Khuyến nghị luôn chỉ định thuộc tính key với v-for, ngoại trừ những trường hợp khi nội dung lặp lại trong DOM đơn giản, hoặc khi bạn cố ý dựa vào chiến lược cập nhật mặc định để cải thiện hiệu suất.

Nhìn chung, vấn đề thêm key thường nảy sinh khi lặp qua một mảng các đối tượng. Trong trường hợp này, một trong các khóa của đối tượng là một trường duy nhất, ví dụ: id:

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

Hãy lặp qua mảng đã cho bằng vòng lặp, chỉ định các key tương ứng:

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

Hãy lặp qua mảng sau bằng vòng lặp và hiển thị tên sản phẩm dưới dạng danh sách ul:

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