So verwenden Sie von Vue berechnete Eigenschaften

Dieses Mal werde ich Ihnen zeigen, wie Sie das Vue-Berechnungsattribut verwenden und welche Vorsichtsmaßnahmen für das Vue-Berechnungsattribut gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an .

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 umgedrehten

String 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 haben wir möglicherweise andere berechnete Eigenschaften, 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, während sich

andere

Daten ändern, ist es leicht, die Überwachung zu missbrauchen – insbesondere, wenn Sie AngularJS
verwendet haben. Allerdings ist es oft besser, berechnete Eigenschaften zu verwenden als zwingende Überwachungsrückrufe. 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 erhalten Sie die Position des DOM-Elements in JS

Detaillierte Erläuterung der dynamischen jQuery+Ajax-Operation Tabelle tr td Schritte

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