Detaillierte Erklärung der berechneten Eigenschaften von Vue
|
1. Was ist ein berechnetes Attribut? Einfach ausgedrückt wird das berechnete Ergebnis im Attribut gespeichert, das man sich wie einen Cache vorstellen kann.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
</Kopf>
<Text>
<div id="app">
<!--Beachten Sie, dass es currentTime1() ist, die Klammern stehen für Methodenaufrufe.-->
<p>aktuelleZeit1: {{aktuelleZeit1()}}</p>
<!--Die currentTime1 steht hier nicht in Klammern und wird über Attribute aufgerufen-->
<p>aktuelleZeit2: {{aktuelleZeit2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<Skript>
var vm = neuer Vue({
el: "#app",
Daten: {
Nachricht: „Hallo Vue!“
},
Methoden: {
aktuelleZeit1: Funktion () {
// Gibt den aktuellen Zeitstempel zurück return Date.now();
}
},
berechnet: {
/*Hinweis: Hier gibt es berechnete Eigenschaften: und die Methoden- und berechneten Methodennamen dürfen nicht identisch sein.
Es werden nur Methoden aufgerufen, die denselben Namen haben*/
aktuelleZeit2: Funktion () {
diese.Nachricht;
// Gibt den aktuellen Zeitstempel zurück return Date.now();
}
}
});
</Skript>
</body>
</html>
Laufergebnisse:
Vielleicht scheint es auf den ersten Blick keinen Unterschied zu geben. Aber wenn wir genau darüber nachdenken, ist das eine eine Methode und das andere eine Eigenschaft. Wie unten dargestellt:
<div id="app">
<!--Beachten Sie, dass es currentTime1() ist, die Klammern stehen für Methodenaufrufe.-->
<p>aktuelleZeit1: {{aktuelleZeit1()}}</p>
<!--Die currentTime1 steht hier nicht in Klammern und wird über Attribute aufgerufen-->
<p>aktuelleZeit2: {{aktuelleZeit2}}</p>
</div>
Wichtiger Punkt : Attribute speichern Werte. Sie ändern sich nur, wenn neue Werte eingehen. Andernfalls ist es dasselbe wie Caching. Schauen wir uns das an:
Zur Erklärung: 1. Aus 1 und 2 können wir erkennen, dass das eine eine Methode und das andere eine Eigenschaft ist. Es ist definitiv nicht möglich, eine Eigenschaft mit einer Methode aufzurufen. 2. In 1 und 3 können wir sehen, dass sich der Wert des Methodenaufrufs ständig ändert, der Wert des Attributaufrufs jedoch nicht. Dies entspricht dem Cache-Mechanismus. 3. Aus 3, 4 und 5 können wir ersehen, dass wenn wir den Wert in der Funktion ändern, dies dem Ändern des Werts im Cache entspricht und der Wert dann aktualisiert wird. ZusammenfassenWenn eine Methode aufgerufen wird, müssen jedes Mal Berechnungen durchgeführt werden. Da ein Berechnungsprozess stattfindet, entsteht zwangsläufig ein System-Overhead. Was ist, wenn sich das Ergebnis nicht häufig ändert? An diesem Punkt können Sie erwägen, das Ergebnis zwischenzuspeichern. Dies lässt sich ganz einfach mithilfe der Computereigenschaften erledigen. Die Hauptfunktion von Computereigenschaften besteht darin, Berechnungsergebnisse, die sich nicht häufig ändern, zwischenzuspeichern, um den Systemaufwand zu verringern. -----Versteht ihr, meine Freunde? Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können! Das könnte Sie auch interessieren:
|
<<: Tiefgreifendes Verständnis des Linux-Lastausgleichs LVS
>>: Tipps zur Verwendung von Bildlaufleisten in HTML
Artikel empfehlen
So konfigurieren Sie SSL für den Koa2-Dienst
I. Einleitung 1: SSL-Zertifikat Mein Domänenname ...
MySQL-Wissenspunkte für die Computerprüfung der zweiten Ebene MySQL-Alter-Befehl
Verwendung des ALTER-Befehls in MySQL zum Bearbei...
Ein kurzes Verständnis der drei Prinzipien zum Hinzufügen von MySQL-Indizes
1. Die Bedeutung von Indizes Indizes werden verwe...
Implementierung der Nginx-Lastverteilung/SSL-Konfiguration
Was ist Lastenausgleich? Wenn ein Domänenname auf...
Tomcat-Konfiguration und wie man ihn in Eclipse startet
Inhaltsverzeichnis So installieren und konfigurie...
Die vollständige Verwendung von Setup, Ref und Reactive in der Vue3-Kombinations-API
1. Erste Schritte mit setUp Stellen Sie kurz die ...
Verstehen Sie kurz die beiden gängigen Methoden zum Erstellen von Dateien im Linux-Terminal
Wir alle wissen, dass wir den Befehl mkdir verwen...
Detaillierte Erläuterung der zugrunde liegenden Implementierungsmethode des Nginx-Polling-Algorithmus
Einführung in den Polling-Algorithmus Viele Leute...
Erklären Sie den Unterschied zwischen Iframe und Frame in HTML anhand von Beispielen
Ich weiß nicht, ob Sie das Frameset-Attribut in I...
HTML5+CSS3-Codierungsstandards
Die goldene Regel Unabhängig davon, wie viele Per...
So wandeln Sie lokale Variablen in JavaScript in globale Variablen um
Zuerst müssen wir den Selbstaufruf der Funktion k...
Verständnis und Anwendungsanalyse der pessimistischen und optimistischen Sperre von MySQL
In diesem Artikel werden die pessimistische und d...
Tipps zum Implementieren mehrerer Rahmen in CSS
1. Mehrere Grenzen[1] Hintergrund: Box-Shadow, Um...
CentOS konfiguriert die lokale Yum-Quelle / Alibaba Cloud Yum-Quelle / 163yuan-Quelle und konfiguriert die Priorität der Yum-Quelle
1. Verwenden Sie ein Centos-Image, um eine lokale...
MySQL Workbench herunterladen und verwenden Tutorial detaillierte Erklärung
1. MySQL Workbench herunterladen Workbench ist ei...