Berechneter Wert oder Funktion?

In Bedingungen und Listen hat eine Funktion, die die Vorlage aufruft, das getan, was in der vorigen Übung angezeigtesMenue getan hat. Beide zeigen dieselbe Liste, warum also ein berechneter Wert? Dafür gibt es zwei Gründe.

Der erste ist, dass er sich besser liest. v-for="artikel in angezeigtesMenue" sagt, was die Liste ist: ein Wert wie jeder andere, ohne () verwendet, in der Vorlage und in anderen berechneten Werten.

Der zweite ist schwerer zu sehen. Vue rendert die Vorlage einer Komponente erneut, wenn sich irgendwelche Daten ändern, die die Vorlage zeigt, und ruft dabei jedes Mal die Funktionen in der Vorlage erneut auf, auch solche, die mit der Änderung nichts zu tun haben. Einen berechneten Wert dagegen behält Vue und berechnet ihn nur erneut, wenn sich etwas ändert, das er verwendet. Den Unterschied siehst du mit einem console.log() in der Funktion:

function sortiertesMenue() {
    console.log("Speisekarte wird sortiert");
    return [...menue].sort((a, b) => a.preis - b.preis);
}

Neben der Speisekarte begrüßt die App in dieser Übung den Kunden mit Namen. Tippe einen Namen ins Feld: Jeder Buchstabe ändert name, Vue rendert wegen der Begrüßung die Vorlage erneut, und die Konsole zeigt wieder Speisekarte wird sortiert, obwohl sich die Speisekarte gar nicht geändert hat. Bei sechs Artikeln spielt das keine Rolle, aber bei tausend oder bei Arbeit, die lange dauert, würde die Seite beim Tippen langsam werden.

Wie in Bedingungen und Listen sortiert die Funktion eine Kopie, [...menue], denn sort() macht kein neues Array: Es ordnet das um, das es sortiert. Ohne die Kopie würde menue.sort() die Speisekarte selbst umordnen und mit ihr alles andere, was die Speisekarte zeigt.

Wenn die Vorlage also einen Wert braucht, der aus Daten berechnet wird, mache ihn zu einem berechneten Wert und lass Funktionen für Dinge, die etwas tun, wie Handler.