Enosmerni pretok podatkov v Vue
Vsi vhodni parametri tvorijo enosmerno povezavo med lastnostjo podrejenega in starševsko lastnostjo: ko se starševska lastnost posodobi, se bo prenesla na podrejenega, ne obratno. To preprečuje naključno spreminjanje stanja starša s strani podrejenih komponent, kar lahko oteži razumevanje pretoka podatkov v vaši aplikaciji.
Poleg tega se vsakič, ko se posodobi starševska komponenta, vsi vhodni parametri podrejene komponente posodobijo s trenutnimi vrednostmi. To pomeni, da ne bi smeli poskušati spreminjati vhodnega parametra znotraj podrejene komponente. Če to storite, bo Vue prikazal opozorilo v konzoli.
Običajno obstajata dva primera, ko se pojavi skušnjava za spreminjanjem vhodnega parametra. Oba pa si poglejmo.
Prvi primer
Vhodni parameter se uporablja za prenos začetne vrednosti; podrejena komponenta želi uporabiti to vrednost kot lokalno lastnost podatkov v prihodnosti. V tem primeru je najbolje definirati lokalno lastnost v podatkih, ki uporablja vrednost vhodnega parametra kot začetno vrednost:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Drugi primer
Vhodni parameter se posreduje kot surova vrednost, ki jo je treba pretvoriti. V tem primeru je najbolje definirati izračunano lastnost z uporabo vhodnega parametra:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Opomba
Upoštevajte, da se objekti in polja v JavaScript-u prenašajo po referenci, zato če je vhodni parameter polje ali objekt, potem spremembe znotraj podrejene komponente tega objekta ali polja vplivajo na stanje starša in Vue tega ne more opozoriti. Izmikanje kakršnim koli mutacijam vhodnih parametrov, vključno z objekti in polji, je priporočljivo, saj lahko ignoriranje enosmerne povezave podatkov vodi do nezaželenih rezultatov.
