So verwenden Sie von Vue berechnete Eigenschaften und Methoden-Listener

Dieses Mal zeige ich Ihnen, wie Sie Vue zum Berechnen von Attributen und Methoden-Listenern verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Vue zum Berechnen von Attributen und Methoden-Listenern? Kampf Werfen wir einen Blick auf den Fall.

Berechnete Eigenschaften

Ausdrücke innerhalb von 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 umgedrehtenString der variablen Nachricht anzeigen möchten. Noch schwieriger wird es, wenn Sie hier in der Vorlage mehrmals auf die umgedrehte Zeichenfolge verweisen 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 zuvor

AngularJS 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 führen Sie die vue.js-Anmeldekontrolle durch

So verwenden Sie JS, um die absolute Position zu erhalten von DOM-Elementen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie von Vue berechnete Eigenschaften und Methoden-Listener. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!