Μονόδρομη ροή δεδομένων στο Vue

Όλες οι ιδιότητες (props) σχηματίζουν μια μονόδρομη σύνδεση μεταξύ της θυγατρικής ιδιότητας και της γονικής: όταν η γονική ιδιότητα ενημερωθεί, θα μεταβιβάζεται στη θυγατρική, αλλά όχι αντίστροφα. Αυτό αποτρέπει την τυχαία τροποποίηση της γονικής κατάστασης από τα θυγατρικά στοιχεία, κάτι που μπορεί να δυσκολέψει την κατανόηση της ροής δεδομένων της εφαρμογής σας.

Επιπλέον, κάθε φορά που ενημερώνεται το γονικό στοιχείο, όλες οι ιδιότητες (props) του θυγατρικού στοιχείου θα ενημερώνονται με τις τρέχουσες τιμές. Αυτό σημαίνει ότι δεν πρέπει να προσπαθήσετε να τροποποιήσετε μια ιδιότητα (prop) μέσα στο θυγατρικό στοιχείο. Εάν το κάνετε, Το Vue θα εμφανίσει μια προειδοποίηση στην κονσόλα.

Συνήθως συναντώνται δύο περιπτώσεις όπου προκύπτει ο πειρασμός να τροποποιηθεί μια ιδιότητα (prop). Ας τις εξετάσουμε.

Πρώτη περίπτωση

Η ιδιότητα (prop) χρησιμοποιείται για τη μετάδοση μιας αρχικής τιμής· το θυγατρικό στοιχείο θέλει να τη χρησιμοποιήσει ως τοπική ιδιότητα δεδομένων στο μέλλον. Σε αυτήν την περίπτωση, είναι καλύτερο να ορίσετε μια τοπική ιδιότητα στα data που χρησιμοποιεί την τιμή της ιδιότητας (prop) ως αρχική:

props: ['initialCounter'],
data() {
	return {
		counter: this.initialCounter
	};
}

Δεύτερη περίπτωση

Η ιδιότητα (prop) μεταβιβάζεται ως ακατέργαστη τιμή που πρέπει να μετατραπεί. Σε αυτήν την περίπτωση, είναι καλύτερο να ορίσετε μια computed ιδιότητα που χρησιμοποιεί την ιδιότητα (prop):

props: ['size'],
computed: {
	normalizedSize: function() {
		return this.size.trim().toLowerCase();
	}
}

Σημείωση

Λάβετε υπόψη ότι τα αντικείμενα και οι πίνακες στην JavaScript μεταβιβάζονται με αναφορά, επομένως εάν μια ιδιότητα (prop) είναι πίνακας ή αντικείμενο, τότε οι αλλαγές μέσα στο θυγατρικό στοιχείο σε αυτό το αντικείμενο ή πίνακα θα επηρεάζουν την κατάσταση του γονέα και το Vue δεν είναι σε θέση να προειδοποιήσει γι' αυτό. Θα πρέπει να αποφεύγονται τυχόν μεταλλάξεις των ιδιοτήτων (props), συμπεριλαμβανομένων αντικειμένων και πινάκων, καθώς η αγνόηση της μονόδρομης σύνδεσης δεδομένων μπορεί να οδηγήσει σε ανεπιθύμητα αποτελέσματα.