Το χαρακτηριστικό key στο Vue

Όταν το Vue ενημερώνει μια λίστα στοιχείων, που αποδίδεται με την οδηγία v-for, από προεπιλογή χρησιμοποιεί μια στρατηγική ενημέρωσης "in-place". Εάν η σειρά των στοιχείων του πίνακα ή του αντικειμένου αλλάξει, το Vue δεν θα μετακινήσει τα στοιχεία του DOM, αλλά απλώς θα ενημερώσει κάθε στοιχείο "in-place", ώστε να εμφανίζει τα νέα δεδομένα στο αντίστοιχο ευρετήριο.

Για να υποδείξει στο 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',
			},
		]
	}
}