Ausführliche Erläuterung der von Vue berechneten Eigenschaften und praktischer Projekte für Hörer

Dieses Mal werde ich Ihnen die berechneten Eigenschaften und praktischen Listener-Projekte von Vue ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die berechneten Eigenschaften und praktischen Listener-Projekte von Vue?

Berechnete Eigenschaften

Ausdrücke in Vorlagen sind sehr praktisch, aber für einfache Vorgänge konzipiert. Wenn einer Vorlage zu viel Logik hinzugefügt wird, kann sie übergewichtig und schwer zu warten sein. Zum Beispiel:

<p id="example">
 {{ message.split('').reverse().join('') }}
</p>

Hier ist die Vorlage keine einfache deklarative Logik mehr. Sie müssen eine Weile zuschauen, bis Ihnen klar wird, dass Sie hier den umgedrehten String der variablen Nachricht anzeigen möchten. Es wird schwieriger, damit umzugehen, wenn Sie die umgedrehte Zeichenfolge hier in der Vorlage mehrmals referenzieren möchten.

Für jede komplexe Logik sollten Sie also berechnete Eigenschaften verwenden.

Grundlegendes Beispiel

<p id="app">
 {{fullName}}
</p>  
var vm = new Vue({
 el: '#app',
 data: {
  firstName: "王",
  lastName: "小智",
  age: 28
 },
 // 计算属性
 computed: {
   fullName: function () {
     console.log("计算了一次")
     return this.firstName + " " + this.lastName
   }
 }
})

Ergebnis:

Wang Xiaozhi

Dann ändern wir den Wert des Altersattributs über den Browser und Lassen Sie die Seite neu rendern:

Wie Sie sehen können, wurde die Methode, mit der wir das berechnete Attribut des Alterswerts geändert haben, nicht aufgerufen Berechnete Attributänderungen, wie z. B. Nachnamen- oder Vornamenänderungen, was passiert mit dem Druckergebnis?

Wie Sie sehen können, wird das berechnete Attribut neu berechnet, wenn sich seine Abhängigkeiten ändern .

Cache für berechnete Eigenschaften vs. Methode

Sie haben vielleicht bemerkt, dass wir den gleichen Effekt erzielen können, indem wir eine Methode in einem Ausdruck aufrufen:

<p>Reversed message: "{{ fullName() }}"</p>
// 在组件中
methods: {
 fullName: function () {
  console.log("计算了一次")
  return this.firstName + " " + this.lastName;
 }
}

Ergebnis :

Wang Xiaozhi

Ähnlich wie oben beschrieben ändern wir den Wert des Altersattributs über den Browser und lassen die Seite neu rendern:

Es ist ersichtlich, dass die Methode einmal ausgeführt wird, solange unsere Seite neu gerendert wird und die berechnete Eigenschaft nur dann neu bewertet wird, wenn sich die zugehörigen Abhängigkeiten ändern.

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 könnten wir andere berechnete Eigenschaften haben, die von A abhängen. Ohne Caching würden wir den Getter von A zwangsläufig mehrmals ausführen! Wenn Sie kein Caching wünschen, verwenden Sie stattdessen Methoden.

Berechnete Eigenschaften vs. Listening-Eigenschaften

Sie haben vielleicht bemerkt, dass wir den gleichen Effekt auch durch Listening-Eigenschaften erzielen können:

var vm = new Vue({
 el: '#app',
 data: {
  firstName: "王",
  lastName: "小智",
  age: 28，
  fullName
 },
 // 计算属性
 watch: {
   firstName: function () {
    console.log("计算了一次");
    this.fullNmae = this.firstName + this.lastName;
   },
   lastName: function () {
    console.log("计算了一次")
    this.fullNmae = this.firstName + this.lastName;
   }
 }
})

Ergebnis:

Wang Xiaozhi

Ähnlich wie oben beschrieben ändern wir den Wert des Altersattributs über den Browser und lassen die Seite neu rendern:

Wie Sie sehen, hat sich fullName bei Änderungen, die nicht mit fullname zusammenhängen, nicht geändert. Ähnlich wie bei berechneten Eigenschaften wird es nur dann eine Neubewertung geben, wenn sich die zugehörigen Abhängigkeiten ändern , und es wird mit der Version der berechneten Eigenschaft verglichen. Zum Vergleich ist es viel besser, nicht wahr?

Wenn Sie einige Daten haben, die geändert werden müssen, wenn sich andere Daten ändern, ist es leicht, Uhren zu missbrauchen – insbesondere, wenn Sie
AngularJS zuvor verwendet haben. Allerdings ist es oft besser, berechnete Eigenschaften anstelle zwingender Überwachungsrückrufe zu verwenden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie js, um Bilder in Base64 zu konvertieren

Unterrouting des dynamischen Routing-Vorgangs des Vue-Routers

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der von Vue berechneten Eigenschaften und praktischer Projekte für Hörer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!