Vienvirziena datu plūsma Vue
Visas ievades īpašības veido vienvirziena saiti starp apakšējo īpašību un vecāka īpašību: kad vecāka īpašība tiek atjaunināta - tā tiks nodota apakšējai, bet ne otrādi. Tas novērš nejaušas izmaiņas vecāka stāvoklī no apakšējo komponenšu puses, kas var apgrūtināt jūsu lietotnes datu plūsmas izpratni.
Turklāt, katru reizi, kad tiek atjaunināts vecāka komponents, visas apakšējā komponenta ievades īpašības tiks atjauninātas ar jaunākajām vērtībām. Tas nozīmē, ka jums nevajadzētu mēģināt mainīt ievades īpašību iekš apakšējā komponenta. Ja jūs to izdarīsit, Vue konsolē parādīs brīdinājumu.
Parasti sastopami divi gadījumi, kad rodas kārdinājums mainīt ievades īpašību. Apskatīsim tos.
Pirmais gadījums
Ievades īpašība tiek izmantota, lai nodotu sākotnējo vērtību; apakšējais komponents vēlas to izmantot kā lokālu datu īpašību nākotnē. Šajā gadījumā vislabāk ir definēt lokālo datu īpašību, kas izmanto ievades īpašības vērtību kā sākotnējo:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Otrais gadījums
Ievades īpašība tiek nodota kā neapstrādāta vērtība, kas jāpārveido. Šajā gadījumā vislabāk ir definēt aprēķināto īpašību, izmantojot ievades īpašību:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Piezīme
Ņemiet vērā, ka objekti un masīvi JavaScript tiek nodoti pa reference, tādēļ, ja ievades īpašība ir masīvs vai objekts, tad izmaiņas iekš apakšējā komponenta šajā objektā vai masīvā ietekmēs vecāka stāvokli, un Vue nespēj par to brīdināt. Jāizvairās no jebkādām ievades īpašību mutācijām, ieskaitot objektus un masīvus, jo vienvirziena datu saites ignorēšana var novest pie nevēlamiem rezultātiem.
