Envejsret dataflow i Vue
Alle inputparametre danner en envejs binding mellem den underordnede egenskab og den overordnede: når den overordnede egenskab opdateres, vil den blive sendt til den underordnede, men ikke omvendt. Dette forhindrer utilsigtet ændring af den overordnede tilstand af de underordnede komponenter, hvilket kan gøre det vanskeligt at forstå dataflowet i din applikation.
Desuden, hver gang den overordnede komponent opdateres, vil alle inputparametre i den underordnede komponent blive opdateret med aktuelle værdier. Det betyder, at du ikke bør forsøge at ændre en inputparameter inde i den underordnede komponent. Hvis du gør det, vil Vue vise en advarsel i konsollen.
Der er normalt to tilfælde, hvor fristelsen til at ændre en inputparameter opstår. Lad os se på dem.
Første tilfælde
Inputparameteren bruges til at overføre en startværdi; den underordnede komponent ønsker at bruge den som en lokal dataegenskab fremover. I dette tilfælde er det bedst at definere en lokal egenskab i data, der bruger inputparameterens værdi som startværdi:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Andet tilfælde
Inputparameteren sendes som en rå værdi, der skal transformeres. I dette tilfælde er det bedst at definere en beregnet egenskab, der bruger inputparameteren:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Bemærkning
Bemærk at objekter og arrays i JavaScript overføres som reference, så hvis en inputparameter er et array eller et objekt, vil ændringer inde i den underordnede komponent af dette objekt eller array påvirke den overordnede tilstand, og Vue er ikke i stand til at advare om dette. Man bør undgå enhver mutation af inputparametre, inklusive objekter og arrays, da ignorering af envejs data binding kan føre til uønskede resultater.
