Unidirektionaler Datenfluss in Vue
Alle Props bilden eine unidirektionale Bindung zwischen der untergeordneten Eigenschaft und der übergeordneten: wenn die übergeordnete Eigenschaft aktualisiert wird, wird sie an die untergeordnete weitergegeben, aber nicht umgekehrt. Dies verhindert die versehentliche Änderung des übergeordneten Zustands durch untergeordnete Komponenten, was das Verständnis des Datenflusses Ihrer Anwendung erschweren könnte.
Darüber hinaus werden jedes Mal, wenn die übergeordnete Komponente aktualisiert wird, alle Props der untergeordneten Komponente auf die neuesten Werte aktualisiert. Das bedeutet, dass Sie nicht versuchen sollten, eine Prop innerhalb der untergeordneten Komponente zu ändern. Wenn Sie dies tun, wird Vue eine Warnung in der Konsole anzeigen.
Es gibt normalerweise zwei Fälle, in denen die Versuchung auftritt, eine Prop zu ändern. Lassen Sie uns diese betrachten.
Erster Fall
Die Prop wird zur Übergabe eines Anfangswerts verwendet; die untergeordnete Komponente möchte sie anschließend als lokale Dateneigenschaft verwenden. In diesem Fall ist es am besten, eine lokale Dateneigenschaft zu definieren, die den Wert der Prop als Anfangswert verwendet:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Zweiter Fall
Die Prop wird als Rohwert übergeben, der transformiert werden muss. In diesem Fall ist es am besten, eine berechnete Eigenschaft zu definieren, die die Prop verwendet:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Hinweis
Bitte beachten Sie, dass Objekte und Arrays in JavaScript als Referenz übergeben werden. Wenn es sich bei einer Prop also um ein Array oder ein Objekt handelt, werden Änderungen an diesem Objekt oder Array innerhalb der untergeordneten Komponente den Zustand der übergeordneten Komponente beeinflussen, und Vue ist nicht in der Lage, davor zu warnen. Mutationen von Props sollten vermieden werden, einschließlich solcher von Objekten und Arrays, da das Ignorieren der unidirektionalen Datenbindung zu unerwünschten Ergebnissen führen kann.
