Was sind die Unterschiede zwischen berechnet und Methode in Vue?

Dieser Artikel stellt Ihnen den Unterschied zwischen berechnet und Methode in Vue vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

1 Die beiden Hauptunterschiede zwischen berechnet und Methode

Im offiziellen Dokument werden die beiden wichtigsten Punkte hervorgehoben, die berechnet und methodisch unterscheiden: berechnet ist ein Attributaufruf, während Methoden Funktionen sind Aufrufe

• computed hat eine Caching-Funktion, Methoden jedoch nicht

• OK, schauen wir uns ein konkretes Beispiel an

  <!--HTML部分-->
  <div id="app">
      <h1>{{message}}</h1>
      <p class="test1">{{methodTest}}</p>
      <p class="test2-1">{{methodTest()}}</p>
      <p class="test2-2">{{methodTest()}}</p>
      <p class="test2-3">{{methodTest()}}</p>
      <p class="test3-1">{{computedTest}}</p>
      <p class="test3-2">{{computedTest}}</p>
  </div>
  <!--script部分-->
  let vm = new Vue({
      el: &#39;#app&#39;,
      data: {
          message: &#39;我是消息，&#39;
      },
      methods: {
          methodTest() {
              return this.message + &#39;现在我用的是methods&#39;
          }
      },
      computed: {
          computedTest() {
              return this.message + &#39;现在我用的是computed&#39;
          }
      }
  })

2. Berechneter Attributaufruf

Aufmerksame Freunde haben vielleicht entdeckt, dass Interpolation in HTML aufgerufen wird Die in

definierte Methode wird in Form eines Attributzugriffs berechnet, {{computedTest}}

• Aber für die durch Methoden definierte Methode müssen wir () hinzufügen, um sie aufzurufen, z. B. {{methodTest() } }, andernfalls zeigt die Ansicht die Situation von Test1, siehe Bild unten

3 Die Cache-Funktion von berechnet

Zunächst müssen wir verstehen, wozu der Cache dient. Im Vergleich zu jedem, der weiß, dass HTTP-Caching seine Kernfunktion darin besteht, einige nicht auf dem Server aktualisierte Ressourcen wiederzuverwenden, einige unnötige Anforderungen zu vermeiden und das Benutzererlebnis zu optimieren

Dasselbe gilt für berechnete:

Im Im obigen Beispiel wird auf die durch Methoden definierten Methoden in Form von Funktionsaufrufen zugegriffen, und dann führen test2-1, test2-2 und test2-3 die methodTest-Methode dreimal aus. Wenn wir auf ein Szenario stoßen, sind 1.000 methodTests erforderlich Rückgabewert, dann besteht kein Zweifel daran, dass dies unweigerlich viel Abfall verursachen wird.

Noch erschreckender ist, dass jede der 1000 methodTest-Methoden neu berechnet wird, wenn Sie den Wert von message ändern. . . .

Aus diesem Grund wird in offiziellen Dokumenten immer wieder betont, dass für jede komplexe Logik berechnete Eigenschaften verwendet werden sollten Wenn beispielsweise Vue instanziiert wird, definiert „computed“ die Methode „computedTest“, um eine Berechnung durchzuführen und einen Wert zurückzugeben. Solange sich die Nachrichtendaten, auf denen die Methode „computedTest“ basiert, nicht ändern, wird die Methode „computedTest“ nicht neu berechnet. Das heißt, test3-1 und test3-2 erhalten den Rückgabewert direkt und nicht das Ergebnis der Neuberechnung durch die Methode „computedTest“.

Die Vorteile davon liegen ebenfalls auf der Hand. Wenn wir auf ein Szenario stoßen, das 1000 berechnete Test-Rückgabewerte erfordert, besteht kein Zweifel daran, dass dies im Vergleich zu Methoden erheblich Speicher spart. Auch wenn Sie den Wert der Nachricht ändern. berechnetDer Test wird nur einmal berechnet

4. Andere Erklärungen für berechnet sind tatsächlich sowohl ein Attribut als auch eine Methode Verhindern Sie, dass die Logik bei der Textinterpolation zu schwer ist und die Wartung erschwert wird 5 vue in 2020 .js Video-Tutorial-Auswahl

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen berechnet und Methode in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!