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
Verwendung von MySQL DDL-Anweisungen
Vorwort Die Sprachklassifikation von SQL umfasst ...
Umfassende Analyse der Isolationsebenen in MySQL
Wenn die Datenbank gleichzeitig denselben Datenst...
Vue3.0+vite2 implementiert dynamisches asynchrones Lazy Loading von Komponenten
Inhaltsverzeichnis Erstellen Sie ein Vite-Projekt...
Detaillierte Erklärung zur Verwendung des Grep-Befehls in Linux
1. Offizielle Einführung grep ist ein häufig verw...
Reines CSS zum Erstellen der Wassertropfen-Animationsschaltfläche im Material Design
Vorwort Solche Spezialeffekte sollte man oft sehe...
So stellen Sie Python-Crawler-Skripte unter Linux bereit und richten geplante Aufgaben ein
Letztes Jahr habe ich aufgrund von Projektanforde...
CSS-Beispielcode zum Festlegen des Bildlaufleistenstils
Der CSS-Implementierungscode zum Festlegen des Bi...
Ein Beispiel für die dynamische Implementierung verschiedener Datenstile in einer Spalte der el-Tabelle des Elements ui
Problembeschreibung Im Rahmen der Ele.me-Benutzer...
So zeigen Sie im img-Tag in HTML nur die Bildmitte an (drei Methoden)
Derzeit gibt es drei Möglichkeiten, die Mitte ein...
Begrenzung der Anzahl kurzfristiger Zugriffe auf eine bestimmte IP basierend auf Nginx
Die Festlegung einer Begrenzung der Anzahl von Be...
Eingabetyp begrenzen (mehrere Methoden)
1. Es können nur chinesische Schriftzeichen eingeg...
Detaillierte Einführung in das benutzerdefinierte Docker-Netzwerk
Inhaltsverzeichnis Benutzerdefiniertes Docker-Net...
Auszeichnungssprache - Titel
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
Analyse und Praxis des serverseitigen Rendering-Prinzips von React
Die meisten Leute haben schon einmal vom Konzept ...
Mehrere Möglichkeiten zum Zentrieren einer Box in der Webentwicklung
1. Notieren Sie mehrere Methoden zum Zentrieren d...