Jednosmerný tok údajov vo Vue
Všetky vstupné parametre tvoria jednosmerné prepojenie medzi podradenou vlastnosťou a nadradenou: keď sa nadradená vlastnosť aktualizuje, bude odovzdaná podradenému, ale nie naopak. Toto zabraňuje náhodnej zmene stavu nadradeného komponentu podradenými komponentmi, čo môže sťažiť pochopenie toku údajov vašej aplikácie.
Okrem toho, zakaždým keď sa aktualizuje nadradený komponent, všetky vstupné parametre podradeného komponentu budú aktualizované na aktuálne hodnoty. To znamená, že nemali by ste sa pokúšať zmeniť vstupný parameter vnútri podradeného komponentu. Ak to urobíte, Vue zobrazí varovanie v konzole.
Zvyčajne sa vyskytujú dva prípady, kedy vzniká pokušenie zmeniť vstupný parameter. Poďme ich preskúmať.
Prvý prípad
Vstupný parameter sa používa na odovzdanie počiatočnej hodnoty; podradený komponent ju chce použiť ako lokálnu vlastnosť údajov v budúcnosti. V tomto prípade je najlepšie definovať lokálnu vlastnosť v dátach, ktorá používa hodnotu vstupného parametra ako počiatočnú:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Druhý prípad
Vstupný parameter je odovzdaný ako nespracovaná hodnota, ktorú je potrebné transformovať. V tomto prípade je najlepšie definovať vypočítanú vlastnosť pomocou vstupného parametra:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Poznámka
Majte na pamäti, že objekty a polia v JavaScripte sa odovzdávajú odkazom, takže ak je vstupným parametrom pole alebo objekt, tak zmeny vnútri tohto objektu alebo poľa v podradenom komponente budú vplývať na stav nadradeného komponentu a Vue na to nevie upozorniť. Mali by ste sa vyhnúť akýmkoľvek mutáciám vstupných parametrov, vrátane objektov a polí, pretože ignorovanie jednosmerného viazania údajov môže viesť k nežiaducim výsledkom.
