Dieses Mal zeige ich Ihnen, wie Sie von Vue berechnete Eigenschaften korrekt verwenden und welche Vorsichtsmaßnahmen für die korrekte Verwendung von von Vue berechneten Eigenschaften gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.
1. Was ist ein berechnetes Attribut
Die Ausdrücke in Vorlagen sind sehr praktisch, aber ursprünglich für einfache Operationen konzipiert. Wenn einer Vorlage zu viel Logik hinzugefügt wird, kann sie übergewichtig und schwer zu warten sein. Zum Beispiel:
1 2 3 |
|
Der Ausdruck hier enthält 3 Operationen, was nicht sehr klar ist. Wenn Sie also auf komplexe Logik stoßen, sollten Sie das spezielle berechnete Attribut berechnet von Vue verwenden, um damit umzugehen.
2. Verwendung berechneter Attribute
Verschiedene komplexe Logiken können in einem berechneten Attribut vervollständigt werden, einschließlich Operationen, Funktionsaufrufen usw. As solange am Ende ein Ergebnis zurückgegeben wird.
Lassen Sie uns das obige Beispiel mit berechneten Eigenschaften umschreiben
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
Das Ergebnis:
Ursprüngliche Nachricht: „Hallo“
Berechnete umgekehrte Nachricht : "olleH"
Zusätzlich zur einfachen Verwendung im obigen Beispiel können berechnete Eigenschaften auch auf den Daten mehrerer Vue-Instanzen basieren. Solange sich eine der Daten ändert, ändern sich die berechneten Eigenschaften Die Ansicht wird ebenfalls aktualisiert.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
Es gibt zwei sehr praktische Tipps für berechnete Eigenschaften, die leicht übersehen werden: Erstens können berechnete Eigenschaften von anderen berechneten Eigenschaften abhängen. Zweitens können berechnete Eigenschaften nicht nur auf den Daten der aktuellen Vue-Instanz basieren , aber auch Daten anderer Instanzen, zum Beispiel:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
Jede berechnete Eigenschaft enthält einen Getter und einen Setter. Unsere beiden obigen Beispiele sind die Standardverwendung berechneter Eigenschaften, bei denen nur Getter zum Lesen verwendet werden.
Bei Bedarf können Sie auch eine Setter-Funktion bereitstellen. Wenn Sie den Wert einer berechneten Eigenschaft manuell ändern, genau wie beim Ändern gewöhnlicher Daten, wird die Setter-Funktion ausgelöst, um einige benutzerdefinierte Vorgänge auszuführen, wie zum Beispiel:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
In den meisten Fällen verwenden wir nur die Standard-Getter-Methode zum Lesen einer berechneten Eigenschaft. Setter werden in Unternehmen selten verwendet. Wenn Sie also eine berechnete Eigenschaft deklarieren, können Sie die Standardmethode direkt verwenden Beim Schreiben ist es nicht notwendig, sowohl den Getter als auch den Setter zu deklarieren.
3. Zwischenspeicherung berechneter Attribute
Im obigen Beispiel können wir zusätzlich zur Verwendung berechneter Attribute auch Methoden in Ausdrücken aufrufen Erzielen Sie den gleichen Effekt, wie zum Beispiel:
1 2 3 4 5 6 7 |
|
Wir können dieselbe Funktion als Methode anstelle einer berechneten Eigenschaft definieren, und das Endergebnis der beiden Methoden ist tatsächlich genau das gleiche. Nur einer verwendet reverseTitle()
, um den Wert abzurufen, und der andere verwendet reverseTitle, um den Wert abzurufen.
Der Unterschied besteht jedoch darin, dass berechnete Eigenschaften basierend auf ihren Abhängigkeiten zwischengespeichert werden. Eine berechnete Eigenschaft wird nur dann neu bewertet, wenn sich die zugehörigen Abhängigkeiten ändern.
Das bedeutet, dass, solange sich der Titel nicht geändert hat, bei mehrmaligem Zugriff auf die berechnete Eigenschaft „reverseTitle“ sofort das vorherige Berechnungsergebnis zurückgegeben wird, ohne dass die Funktion erneut ausgeführt werden muss.
Ein kleines Beispiel:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
Im Gegensatz dazu führt die aufrufende Methode die Funktion immer dann erneut aus, wenn ein erneutes Rendern ausgelöst wird.
Warum brauchen wir Caching? Angenommen, wir haben eine rechenintensive Eigenschaft A, die das Durchlaufen eines riesigen Arrays und die Durchführung vieler Berechnungen erfordert. Dann haben wir möglicherweise andere berechnete Eigenschaften, die von A abhängen.
Ohne Caching werden wir den Getter von A zwangsläufig mehrmals ausführen! Wenn Sie kein Caching wünschen, verwenden Sie stattdessen Methoden.
Werfen wir einen Blick auf die Verwendung der von Vue berechneten Eigenschaften
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
|
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall gelesen haben Schauen Sie sich diesen Artikel an, um weitere spannende Informationen zu erhalten. Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Detaillierte Erläuterung der Verwendung der JS-Datums- und Zeitauswahl
Detaillierte Erläuterung der Timeout-Verarbeitung von Vue Axios-Anfragen (mit Code)
Das obige ist der detaillierte Inhalt vonSo verwenden Sie von Vue berechnete Eigenschaften richtig. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!