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
Get/Delete-Methode zum Übergeben von Array-Parametern in Vue
Wenn Front-End und Back-End interagieren, müssen ...
Lösen Sie das Gruppieren-nach-Abfrage-Problem nach dem Upgrade von Mysql auf 5.7
Finden Sie das Problem Nach dem Upgrade von MySQL...
SSH-Portweiterleitung zur Erzielung einer Intranet-Penetration
Die Maschinen in unserem LAN können auf das exter...
Die Hook-Funktion von Vue-Router implementiert Routing Guard
Inhaltsverzeichnis Überblick Globale Hook-Funktio...
SQL-Implementierung von LeetCode (196. Doppelte Postfächer löschen)
[LeetCode] 196.Doppelte E-Mails löschen Schreiben...
Drei Möglichkeiten zur Kommunikation zwischen React-Komponenten (einfach und benutzerfreundlich)
Inhaltsverzeichnis 1. Kommunikation zwischen Elte...
Grundlegende Verwendung von UNION und UNION ALL in MySQL
In der Datenbank führen sowohl die Schlüsselwörte...
Lernen Sie MySQL auf einfache Weise
Vorwort Die Datenbank war schon immer meine Schwa...
Gemeinsame Eigenschaften des Framesets (Unterteilung von Frames und Fenstern)
Ein Frame ist ein Webseitenbildschirm, der in mehr...
Reines CSS3 zum Erstellen eines Beispielcodes für Haushühner
Ich habe in letzter Zeit viel Wissen und Artikel ...
Mysql: Der als Definierer angegebene Benutzer ('xxx@'%') existiert nicht – Lösung
Bei der heutigen Projektoptimierung ist bei MySQL...
Analyse und Erklärung der Unterschiede zwischen DIV-, Tabellen- und XHTML-Website-Erstellung
Vereinfacht ausgedrückt geht es beim Erstellen ein...
Zusammenfassung gängiger Begriffe in CSS (Cascading Style Sheet)
Wenn Sie CSS verwenden, vergessen Sie nicht, DOCTY...
Vue realisiert den Produktlupeneffekt
In diesem Artikelbeispiel wird der spezifische Co...
Beispiel für handschriftliches Vue2.0-Daten-Hijacking
Inhaltsverzeichnis 1: Webpack erstellen 2. Datend...