Vienkryptis duomenų srautas Vue
Visos įvesties savybės sudaro vienkryptį ryšį tarp vaiko savybės ir tėvo savybės: kai tėvo savybė atnaujinama - ji bus perduodama vaikui, bet ne atvirkščiai. Tai užkerta kelią atsitiktiniam vaiko komponentų pakeitimui tėvo būsenos, kas gali apsunkinti jūsų programos duomenų srauto supratimą.
Be to, kaskart atnaujinant tėvo komponentą, visos vaiko komponento įvesties savybės bus atnaujintos naujausiomis reikšmėmis. Tai reiškia, kad neturėtumėte bandyti keisti įvesties savybę vaiko komponento viduje. Jei tai padarysite, Vue rodys įspėjimą konsolėje.
Paprastai susiduriama su dviem atvejais, kai kyla pokštas keisti įvesties savybę. Pažvelkime į juos.
Pirmas atvejis
Įvesties savybė naudojama pradinei reikšmei perduoti; vaiko komponentas nori jį naudoti kaip vietinę duomenų savybę vėliau. Šiuo atveju geriausia apibrėžti vietinę duomenų savybę, kuri naudoja įvesties savybės reikšmę kaip pradinę:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Antras atvejis
Įvesties savybė perduodama kaip neapdorota reikšmė, kurią reikia transformuoti. Šiuo atveju geriausia apibrėžti apskaičiuojamą savybę naudojant įvesties savybę:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Pastaba
Atkreipkite dėmesį, kad objektai ir masyvai JavaScript perduodami pagal nuorodą, todėl jei įvesties savybė yra masyvas arba objektas, tai pakeitimai vaiko komponente to objekto arba masyvo paveiks tėvo būseną ir Vue negali įspėti apie tai. Reikėtų vengti bet kokių įvesties savybių mutacijų, įskaitant objektus ir masyvus, nes vienkrypčio duomenų susiejimo ignoravimas gali sukelti nepageidaujamų rezultatų.
