Eenrichtingsgegevensstroom in Vue
Alle props vormen een eenrichtingsbinding tussen de onderliggende eigenschap en de bovenliggende: wanneer de bovenliggende eigenschap wordt bijgewerkt, wordt deze doorgegeven aan de onderliggende, maar niet andersom. Dit voorkomt per ongeluk wijzigen van de bovenliggende staat door onderliggende componenten, wat de gegevensstroom van je applicatie moeilijk te begrijpen kan maken.
Bovendien, elke keer dat de bovenliggende component wordt bijgewerkt, zullen alle props van de onderliggende component worden bijgewerkt met de actuele waarden. Dit betekent dat je niet moet proberen een prop binnen de onderliggende component aan te passen. Als je dit doet, zal Vue een waarschuwing in de console weergeven.
Er zijn meestal twee gevallen waarin de verleiding ontstaat om een prop aan te passen. Laten we ze bekijken.
Eerste geval
De prop wordt gebruikt om een beginwaarde door te geven; de onderliggende component wil deze vervolgens gebruiken als een lokale data-eigenschap. In dit geval is het het beste om een lokale data-eigenschap te definiëren die de waarde van de prop als beginwaarde gebruikt:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Tweede geval
De prop wordt doorgegeven als een onbewerkte waarde die getransformeerd moet worden. In dit geval is het het beste om een berekende eigenschap te definiëren die de prop gebruikt:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Opmerking
Let op dat objecten en arrays in JavaScript by reference worden doorgegeven, dus als de prop een array of object is, dan zullen wijzigingen binnen de onderliggende component aan dat object of array de staat van de bovenliggende component beïnvloeden en Vue is niet in staat hier een waarschuwing voor te geven. Het vermijden van mutaties aan props, inclusief objecten en arrays, wordt aanbevolen, omdat het negeren van de eenrichtingsgegevensbinding kan leiden tot ongewenste resultaten.
