Flux de date unidirecțional în Vue
Toți parametrii de intrare formează o legătură unidirecțională între proprietatea copil și cea părinte: când proprietatea părinte este actualizată - ea va fi transmisă copilului, dar nu și invers. Aceasta previne modificarea accidentală a stării părinte de către componentele copil, ceea ce poate îngreuna înțelegerea fluxului de date al aplicației dumneavoastră.
În plus, de fiecare dată când componenta părinte este actualizată, toți parametrii de intrare ai componentei copil vor fi actualizați cu valori actuale. Aceasta înseamnă că nu ar trebui să încercați să modificați un parametru de intrare în interiorul unei componente copil. Dacă o faceți, Vue va afișa un avertisment în consolă.
De obicei, există două cazuri când apare ispita de a modifica un parametru de intrare. Să le analizăm.
Cazul unu
Parametrul de intrare este folosit pentru a transmite o valoare inițială; componenta copil dorește să îl folosească ca o proprietate locală de date în viitor. În acest caz, cel mai bine este să definiți o proprietate locală în date care să utilizeze valoarea parametrului de intrare ca valoare inițială:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Cazul doi
Parametrul de intrare este transmis ca o valoare neformată, care trebuie transformată. În acest caz, cel mai bine este să definiți o proprietate calculată utilizând parametrul de intrare:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Observație
Rețineți că obiectele și array-urile în JavaScript sunt transmise prin referință, deci dacă un parametru de intrare este un array sau un obiect, atunci modificările în interiorul componentei copil asupra acelui obiect sau array vor influența starea părintelui și Vue nu este capabil să vă avertizeze despre acest lucru. Ar trebui evitate orice mutații ale parametrilor de intrare, inclusiv ale obiectelor și array-urilor, deoarece ignorarea legăturii unidirecționale a datelor poate duce la rezultate nedorite.
