Grundlagen berechneter Eigenschaften in Vue.js: Kompositions-API

Berechnete Eigenschaften

Betrachten wir ein reaktives Objekt:

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

In diesem Objekt möchten wir Meldungen anzeigen, die angeben, ob der Autor Bücher veröffentlicht hat:

<p>Has published books:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

Wir haben eine Berechnung basierend auf author.books durchgeführt. Die in der Vorlage angezeigte Meldung hängt vom Wert von author.books ab. Wir können diese Berechnung mehrfach in der Vorlage verwenden, möchten sie aber nicht wiederholt schreiben. Daher sollten berechnete Eigenschaften für komplexe Logik mit reaktiven Daten verwendet werden.

Verwenden von Berechneten Eigenschaften Beispiel:

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// A computed reference
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

In diesem Beispiel haben wir eine berechnete Eigenschaft mit dem Namen „publicBooksMessage“ definiert. Die Funktion „computed()“ erwartet eine Getter-Funktion und der zurückgegebene Wert ist eine berechnete Referenz. Sie können über „publicBooksMessage.value“ auf das berechnete Ergebnis zugreifen. In Vorlagen werden berechnete Referenzen jedoch automatisch entpackt, sodass Sie darauf verweisen können, ohne .value hinzuzufügen.

Berechnete Eigenschaften verfolgen ihre reaktiven Abhängigkeiten. Vue weiß, dass die Berechnung von „publicatedBooksMessage“ vom Wert von „author.books“ abhängt, und wenn sich „author.books“ ändert, werden alle Kontexte aktualisiert, die von „publicationsBooksMessage“ abhängen.

Berechnetes Caching vs. Methoden

Das gleiche Ergebnis kann mit einer Methode erzielt werden:

<p>{{ calculateBooksMessage() }}</p>

In der Komponente:

function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

Sie können dieselbe Funktion als Methode statt als berechnete Eigenschaft definieren. Beide Ansätze führen zum gleichen Ergebnis. Ich möchte jedoch betonen, dass berechnete Eigenschaften zwischengespeichert werden. Das bedeutet, dass a
berechnete Eigenschaften werden nur dann neu bewertet, wenn sich ihre reaktiven Abhängigkeiten ändern. Wenn sich der Wert von author.books beim erneuten Rendern der Komponente nicht geändert hat, wird das zuvor berechnete Ergebnis zurückgegeben, ohne dass die Getter-Funktion erneut ausgeführt werden muss.

Warum ist Caching notwendig?

Stellen Sie sich ein Szenario vor, in dem wir eine kostspielig berechnete Liste haben, die das Durchlaufen eines großen Arrays und die Durchführung vieler Berechnungen erfordert. Wenn wir andere berechnete Eigenschaften haben, die von der Liste abhängen, ohne Zwischenspeicherung, würden wir den Getter unserer Liste viel häufiger als nötig ausführen!

Best Practices

Getter sollten frei von Nebenwirkungen sein. Es ist wichtig, dass berechnete Getter-Funktionen nur reine Berechnungen durchführen und Nebenwirkungen vermeiden.

Ändern Sie beispielsweise keine anderen Zustände, stellen Sie keine asynchronen Anfragen oder ändern Sie das DOM innerhalb eines berechneten Getters! Stellen Sie sich eine berechnete Eigenschaft als eine Möglichkeit vor, einen Wert aus anderen Werten abzuleiten – die alleinige Verantwortung besteht darin, diesen Wert zu berechnen und zurückzugeben.

Abschluss

Wir haben gelernt, wie man Berechnungen mit reaktiven Daten in Vue.js durchführt. Um eine hohe Leistung der Anwendung sicherzustellen, sollten wir berechnete Eigenschaften für Vorgänge verwenden, die auf reaktiven Daten in Vue.js basieren.

Das obige ist der detaillierte Inhalt vonGrundlagen berechneter Eigenschaften in Vue.js: Kompositions-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!