Jednosměrný tok dat ve Vue
Všechny vstupní parametry tvoří jednosměrný svazek mezi podřízenou vlastností a nadřazenou: když se nadřazená vlastnost aktualizuje, bude předána podřízené, ale ne naopak. Toto zabraňuje náhodné změně stavu nadřazeného komponentu podřízenými komponenty, což může ztížit pochopení toku dat vaší aplikace.
Kromě toho, pokaždé když se aktualizuje nadřazený komponent, všechny vstupní parametry podřízeného komponentu budou aktualizovány na aktuální hodnoty. To znamená, že neměli byste se pokoušet upravovat vstupní parametr uvnitř podřízeného komponentu. Pokud tak učiníte, Vue zobrazí varování v konzoli.
Obvykle se setkáme se dvěma případy, kdy vzniká pokušení měnit vstupní parametr. Pojďme je prozkoumat.
První případ
Vstupní parametr je použit pro předání počáteční hodnoty; podřízený komponent ji chce použít jako lokální datovou vlastnost pro další použití. V tomto případě je nejlepší definovat lokální datovou vlastnost, která používá hodnotu vstupního parametru jako počáteční:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Druhý případ
Vstupní parametr je předán jako nezpracovaná hodnota, kterou je třeba transformovat. V tomto případě je nejlepší definovat vypočítanou vlastnost používající vstupní parametr:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Poznámka
Všimněte si, že objekty a pole v JavaScriptu jsou předávány odkazem, takže pokud je vstupním parametrem pole nebo objekt, pak změny uvnitř podřízeného komponentu tohoto objektu nebo pole budou ovlivňovat stav nadřazeného komponentu a Vue není schopno na to varovat. Měli byste se vyvarovat jakýchkoli mutací vstupních parametrů, včetně objektů a polí, protože ignorování jednosměrného svázání dat může vést k nechtěným výsledkům.
