Analyse des Unterschieds zwischen vue-berechneten Eigenschaften und Methoden und Listenern

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung des Unterschieds zwischen Vue-berechneten Eigenschaften und Methoden und Zuhörern vor (Interview-Testpunkte). Ich werde ihn jetzt mit Ihnen teilen und als Referenz verwenden.

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(&#39;&#39;).reverse().join(&#39;&#39;) }}
</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: &#39;#app&#39;,
 data: {
  firstName: "王",
  lastName: "小智",
  age: 28
 },
 // 计算属性
 computed: {
   fullName: function () {
     console.log("计算了一次")
     return this.firstName + " " + this.lastName
   }
 }
})

Ergebnis:

Wang Xiaozhi

Dann Wir ändern den Wert des Altersattributs über den Browser und lassen die Seite neu rendern:

Wie Sie sehen können, haben wir die Methode zur Berechnung des Alterswertattributs geändert, und das war es auch nicht aufgerufen. Wenn sich dann der Wert eines Attributs ändert, z. B. Nachname oder Vorname, was passiert dann mit dem Druckergebnis?

Wie Sie sehen, wann? Wenn sich seine Abhängigkeiten ändern, werden die berechneten Eigenschaften einmal neu berechnet.

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 um die Seite neu zu rendern:

Es ist ersichtlich, dass die Methode einmal ausgeführt wird und die berechnete Eigenschaft einmal ausgeführt wird, solange unsere Seite neu gerendert wird nur dann neu bewertet werden, wenn sich die damit verbundenen 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 können, hat sich für Änderungen, die nicht mit fullname zusammenhängen, fullName nicht geändert. Ähnlich wie bei berechneten Eigenschaften wird es einen Cache geben. Nur wenn sich die damit verbundenen Abhängigkeiten ändern, wäre es viel besser, es neu zu bewerten und mit der berechneten Eigenschaftsversion zu vergleichen, 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.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Analyse von Cookies-Problemen mit Vue SSR

Einführung in den integrierten Switch-Schalter iview table render

Einführung in den Code für Vue-Scroller zum Aufzeichnen der Scroll-Position

Das obige ist der detaillierte Inhalt vonAnalyse des Unterschieds zwischen vue-berechneten Eigenschaften und Methoden und Listenern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!