Flusso di Dati Unidirezionale in Vue
Tutte le proprietà (props) formano un legame unidirezionale tra la proprietà figlia e quella genitore: quando la proprietà del genitore viene aggiornata, essa viene trasmessa al figlio, ma non viceversa. Ciò impedisce la modifica accidentale da parte dei componenti figli dello stato del genitore, che potrebbe rendere difficile la comprensione del flusso di dati della tua applicazione.
Inoltre, ogni volta che il componente genitore viene aggiornato, tutte le proprietà del componente figlio verranno aggiornate con i valori più recenti. Ciò significa che non dovresti tentare di modificare una proprietà all'interno del componente figlio. Se lo fai, Vue mostrerà un avviso nella console.
Di solito ci sono due casi in cui sorge la tentazione di modificare una proprietà. Esaminiamoli.
Primo caso
La proprietà viene utilizzata per passare un valore iniziale; il componente figlio desidera utilizzarlo come una proprietà locale dei dati in seguito. In questo caso, è meglio definire una proprietà locale nei dati che utilizza il valore della proprietà come iniziale:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Secondo caso
La proprietà viene passata come un valore grezzo che deve essere trasformato. In questo caso, è meglio definire una proprietà calcolata utilizzando la proprietà:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Nota
Nota che gli oggetti e gli array in JavaScript vengono passati per riferimento, quindi se una proprietà è un array o un oggetto, allora le modifiche all'interno del componente figlio a quell'oggetto o array influenzeranno lo stato del genitore e Vue non è in grado di avvisarti in merito. Bisogna evitare qualsiasi mutazione delle proprietà, compresi oggetti e array, poiché ignorare il legame unidirezionale dei dati può portare a risultati indesiderati.
