Detaillierte Erklärung der berechneten Eigenschaften, der Überwachungseigenschaften und des Lebenszyklus in Vue.js

Inhaltsverzeichnis

Vorwort
Berechnete Eigenschaften

Einführung in berechnete Eigenschaften
Fallstudie „Erste Schritte“
Statistischer Preisfall
Getter- und Setter-Methoden
Berechneter Eigenschaftencache

Überwachungseigenschaften

Überblick
Code
Zusammenfassen

Vue-Lebenszyklus

Initialisierungsphase
Aktualisierungsphase
Todesstadium

Zusammenfassen

Vorwort

In diesem Kapitel sprechen wir über zwei sehr wichtige berechnete Eigenschaften, Überwachungseigenschaften und den Lebenszyklus in Vue. Kommen wir ohne Unsinn direkt zur Sache.

Berechnete Eigenschaften

Einführung in berechnete Eigenschaften

In der Vorlage können Sie einige Daten direkt über die Interpolationssyntax anzeigen. In einigen Fällen müssen wir die Daten vor der Anzeige transformieren oder berechnen. Wir können die berechnete Option verwenden, um sie zu berechnen. An dieser Stelle fragen sich einige Freunde vielleicht, warum ich ein berechnetes Attribut brauche, wenn ich einfach die Funktion definieren und direkt aufrufen kann? Diese Frage wird weiter unten erläutert. Schauen wir uns zunächst an, wie berechnete Eigenschaften verwendet werden!

Fallstudie „Erste Schritte“

brauchen

Vor- und Nachnamen einer Person verketten

Code

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</Kopf>
	<Text>
		<div id="app">
			<!-- Ursprüngliche Spleißmethode-->
			<p>{{fastName}} {{lastName}}</p>
			<!-- Berechnung in Vorlagensyntax -->
			<p>{{schnellerName + " " + letzterName}}</p>
			<!-- Funktion Berechnung aufrufen-->
			<p v-text="fullName2()"></p>
			<!-- Berechnet anhand berechneter Eigenschaften -->
			<p>{{fullName1}}</p>
		</div>
	</body>
	<Skripttyp="text/javascript">
		var app = new Vue({
			el: "#app",
			Daten: {
				FastName: "Tracy",
				Nachname: "McGrady"
			},
			berechnet: {
				fullName1: Funktion(){
					returniere diesen.schnellenName + " " + diesen.letztenName
				}
			},
			Methoden: {
				fullName2: Funktion(){
					returniere diesen.schnellenName + " " + diesen.letztenName
				}
			}
			
		})
	</Skript>
</html>

Wirkung

Statistischer Preisfall

Code

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</Kopf>
	<Text>
		<div id="app">
			<p>{{Gesamtpreis}}</p>
		</div>
	</body>
	<Skripttyp="text/javascript">
		var app = new Vue({
			el: "#app",
			Daten: {
				Bücher: [
					{id: 100,name: 'Die Kunst der Unix-Programmierung',preis: 119},
					{id: 200,name: 'Ideen zur Java-Programmierung',preis: 105},
					{id: 300,name: 'Programmierung mit hoher Parallelität',preis: 98},
					{id: 400,name: 'Spring5',preis: 99},
				]
			},
			berechnet: {
				Gesamtpreis: Funktion(){
					lass Ergebnis = 0;
					// Normale Schleife /* for(let i = 0;i < this.bookes.length;i++){
						Ergebnis += this.bookes[i].price;
					} */
					
					// Erweiterte for-Schleife, i ist der Index /* for(let i in this.bookes){
						Ergebnis += this.bookes[i].price;
					} */
					// ES6 fügt eine for-Schleife hinzu, um das Objekt direkt abzurufen for(let book of this.bookes){
						Ergebnis += Buchpreis
					}
					Ergebnis zurückgeben;
				}
			}
		})
	</Skript>
</html>

Getter- und Setter-Methoden

einführen

Die vollständige Methode zum Schreiben einer berechneten Eigenschaft umfasst eigentlich Getter- und Setter-Methoden. Deklarieren Sie ein fullName-Objekt. Da wir normalerweise nur den Wert abrufen, lassen wir ihn weg und schreiben ihn wie im obigen Fall. Wir rufen die Get-Methode auf, wenn wir Daten abrufen, und die Set-Methode, wenn wir Daten festlegen.

Code

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</Kopf>
	<Text>
		<div id="app">
			<p>{{vollständigerName}}</p>
		</div>
	</body>
	<Skripttyp="text/javascript">
		var app = new Vue({
			el: "#app",
			Daten: {
				Vorname: "Tracy",
				Nachname: "McGrady"
			},
			// Berechnete Eigenschaften berechnet: {
				// Berechnen Sie das Objekt fullName:{
					//Datensatz festlegen: function(){
						konsole.log('---');
					},
					// Daten abrufen get: function(){
						returniere diesen.Vorname + " " + diesen.Nachname;
					}
				}
			}
		})
	</Skript>
</html>

Berechneter Eigenschaftencache

Hier beantworten wir die Frage nach dem Unterschied zwischen Methoden und berechneten Werten. Der folgende Code verwendet Interpolationssyntax, Methoden und berechnete Eigenschaften zum Rendern von Daten.

Code

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</Kopf>
	<Text>
		<div id="app">
			<!-- Ursprüngliche Methode, die bei der Datenberechnung umständlich ist und nicht empfohlen wird. -->
			<p>Name: {{name}} Tätigkeit: {{job}}</p>
			<!-- Methoden, rufen Sie die Funktion jedes Mal auf, wenn Daten abgerufen werden -->
			<p>{{getInfo1()}}</p>
			<p>{{getInfo1()}}</p>
			<p>{{getInfo1()}}</p>
			<p>{{getInfo1()}}</p>
			<!-- berechnete Methode, wenn sich die Daten nicht geändert haben, wird sie nur einmal aufgerufen und die Daten werden zwischengespeichert-->
			<p>{{getInfo2}}</p>
			<p>{{getInfo2}}</p>
			<p>{{getInfo2}}</p>
			<p>{{getInfo2}}</p>
			<p>{{getInfo2}}</p>
		</div>
	</body>
	<Skripttyp="text/javascript">
		var app = new Vue({
			el: "#app",
			Daten: {
				Name: "Maddie",
				Beruf: „NBA-Star“
			},
			Methoden: {
				getInfo1: Funktion(){
					console.log("Methoden");
					returniere "Name: " + dieser.Name + "Job: " + dieser.Job;
				}
			},
			berechnet: {
				getInfo2: Funktion(){
					console.log("berechnet");
					returniere "Name: " + dieser.Name + "Job: " + dieser.Job;
				}
			}
		})
	</Skript>
</html>

Diagramm

abschließend

Beide Methoden und berechnet scheinen in der Lage zu sein, unsere Funktionen zu erreichen
Die berechnete Eigenschaft wird zwischengespeichert. Bei mehrmaliger Verwendung wird die berechnete Eigenschaft nur einmal aufgerufen.

Überwachungseigenschaften

Überblick

Wir können watch verwenden, um die Änderungen der angegebenen Daten zu überwachen und dann die entsprechende Logik aufzurufen, um die Daten zu verarbeiten

Code

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
	</Kopf>
	<Text>
		<div id="app">
			<input type="text" v-model="Vorname" />
			<input type="text" v-model="Nachname" />
			<input type="text" v-model="vollständigerName" />
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<Skripttyp="text/javascript">
		const app = new Vue({
			el: "#app",
			Daten: {
				Vorname: "A",
				Nachname: "B",
				vollständigerName: "AB"
			},
			// Überwachungseigenschaften watch: {
				vorname(wert) {
					this.fullName = Wert + this.lastName
				},
				Nachname(Wert) {
					dieser.vollständigerName = dieser.vorname + Wert
				}
			}
		})
	</Skript>
</html>

Zusammenfassen

Die Überwachungseigenschaft erfordert viel mehr Code als die berechnete Eigenschaft. Die berechnete Eigenschaft muss nur die Daten berechnen, während die Überwachungseigenschaft die Änderungen der einzelnen Daten überwachen muss.

Vue-Lebenszyklus

Das folgende Diagramm zeigt den Lebenszyklus einer Instanz. Sie müssen nicht alles sofort verstehen, aber mit zunehmendem Lernen und Verwenden wird der Referenzwert immer höher.

Der Lebenszyklus ist grob in drei Phasen unterteilt: Initialisierungsphase, Aktualisierungsphase und Todesphase

Initialisierungsphase

Diese Phase wird aufgerufen, wenn eine neue Vue-Instanz erstellt wird, und wird nur einmal aufgerufen.

beforeCreate: Rufen Sie die Funktion vor dem Erstellen auf

erstellt: Rufen Sie die Funktion nach der Erstellung auf

Anschließend mounten und rendern Sie die Vorlage

beforeMount: Vorgang vor dem Mounten, um das von el ausgewählte Label zu ersetzen

Mounted: Die Montage ist abgeschlossen und die Daten werden im Browser angezeigt

Aktualisierungsphase

In diese Phase wird eingetreten, wenn sich die Daten ändern und die

beforeUpdate: Wird ausgelöst, wenn Daten geändert werden

Aktualisiert: Wird aufgerufen, nachdem der virtuelle DOM geändert wurde, d. h. nachdem die Daten geändert wurden

Todesstadium

Die Todesphase wird ebenfalls nur einmal aufgerufen

beforeDestroy: vor der Zerstörung

zerstört: zerstört

Der Beispielcode lautet wie folgt

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		
	</Kopf>
	<Text>
		<div id="app">
			<p v-show="isShow">{{Nachricht}}</p>
			<p>{{istShow}}</p>
			<button type="button" @click="destroyVM">Mobbing abbrechen</button>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<Skripttyp="text/javascript">
		const app = new Vue({
			el: "#app",
			Daten: {
				Nachricht: "drohend",
				isShow: true
			},
			
			vorErstellen() {
				console.log("vorErstellen");
			},
			
			erstellt() {
				console.log("erstellen");
			},
			
			vorMount() {
				console.log("vorMount");
			},
			
			montiert() {
				console.log("gemountet");
				// Einen Timer erstellen this.intervald = setInterval(()=>{
					console.log("----------"+this.isShow);
					dies.istShow = !dies.istShow;
				},1000)
			},
			
			vorUpdate() {
				console.log("vorUpdate");
			},
			
			aktualisiert() {
				console.log("aktualisiert");
			},
			
			vorZerstören() {
				console.log("vor Zerstörung");
                // Lösche den Timer clearInterval(this.intervald)
			},
			
			zerstört() {
				console.log("zerstört");
			},
			
			Methoden: {
				// Beende die VM
				zerstöreVM() {
					//Rufen Sie die Zerstörungsfunktion this.$destroy() auf.
				}
			}
		})
	</Skript>
</html>

Wie in der folgenden Abbildung gezeigt, werden beim Aktualisieren der Seite nacheinander beforeCreate, created, beforeMount und mounted aufgerufen. Wenn der Timer zum Ändern der isShow-Daten läuft, werden beforeUpdate und updated mehrmals aufgerufen. Durch Klicken auf die Schaltfläche wird die Abmeldefunktion aufgerufen und beforeDestroy und destroy werden aufgerufen.

Im Allgemeinen werden „created“, „mounted“ und „beforeDestroy“ häufiger verwendet.

erstellt, gemountet: Ajax-Anfragen senden, Timer und andere asynchrone Aufgaben starten
beforeDestroy: Erledigen Sie Abschlussarbeiten, wie z. B. das Löschen des Timers

Zusammenfassen

Damit ist dieser Artikel über berechnete Eigenschaften, überwachte Eigenschaften und Lebenszyklen in Vue.js abgeschlossen. Weitere Informationen zu berechneten Eigenschaften, überwachten Eigenschaften und Lebenszyklen in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Zusammenfassung der Wissenspunkte der Vue.js Watch-Überwachungseigenschaft
Implementierung des Vue-Überwachungsattributs für Wetterfälle

<<: Tutorial zur MySQL-Datensicherungsmethode mit Multi-Master und One-Slave

>>: So erstellen Sie Ihren eigenen privaten Nexus-Server unter Linux

Lösung für das Problem, dass nach dem Domänennamen zwei Schrägstriche // erscheinen, wenn nginx für den Domänennamenzugriff konfiguriert ist

Artikel

Eine kurze Analyse der Wissenspunkte zum Exportieren und Importieren von MySQL-Daten

Basierend auf Vue-Simple-Uploader, kapselt die globale Upload-Plug-In-Funktion des Dateisegment-Uploads, des sofortigen Uploads und der Breakpoint-Fortsetzung

Artikel

Zwei Möglichkeiten, Vue-Benutzer dazu zu bringen, sich über einen längeren Zeitraum ohne Bedienung von der Anmeldeseite abzumelden

Inhaltsverzeichnis Problembeschreibung Frontend-S...

Inhaltsverzeichnis

Vorwort

Berechnete Eigenschaften

Einführung in berechnete Eigenschaften

Fallstudie „Erste Schritte“

Statistischer Preisfall

Getter- und Setter-Methoden

Berechneter Eigenschaftencache

Überwachungseigenschaften

Überblick

Code

Zusammenfassen

Vue-Lebenszyklus

Initialisierungsphase

Aktualisierungsphase

Todesstadium

Zusammenfassen

Artikel empfehlen