Vue3 Berechnete Eigenschaften

Berechnete Eigenschaften werden verwendet, um abgeleitete Eigenschaftswerte dynamisch basierend auf Änderungen in anderen Daten zu berechnen, und sie haben einen Caching-Mechanismus; sie werden nur neu berechnet, wenn sich zugehörige Abhängigkeiten ändern.

Schlüsselwort für berechnete Eigenschaft:computed。

Berechnete Eigenschaften sind sehr nützlich, wenn es um die Handhabung komplexer Logik geht.

Sie können sich das folgende Beispiel zum Umkehren einer Zeichenkette ansehen:

Beispiel 1

<div id="app"> {{ message.split('').reverse().join('') }} </div>

Ausprobieren »

In Beispiel 1 wird das Template sehr komplex und ist nicht leicht zu lesen und zu verstehen.

Als Nächstes sehen wir uns ein Beispiel an, das berechnete Eigenschaften verwendet:

Beispiel 2

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue-Testbeispiel - Beispiel-Tutorial (example.com)</title> <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script> </head> <body> <div id="app"> <p>Ursprüngliche Zeichenfolge: {{ message }}</p> <p>Berechnete umgekehrte Zeichenfolge: {{ reversedMessage }}</p> </div> <script>const app = { data() { return { message: 'EXAMPLE!!' } }, computed: { // Getter für berechnete Eigenschaft reversedMessage: function () { // `this` verweist auf die vm-Instanz return this.message.split('').reverse().join('') } } } Vue.createApp(app).mount('#app')</script> </body> </html>

Ausprobieren »

In Beispiel 2 wird eine berechnete Eigenschaft `reversedMessage` deklariert.

Die bereitgestellte Funktion wird als Getter für die Eigenschaft `vm.reversedMessage` verwendet.

`vm.reversedMessage` hängt von `vm.message` ab. Wenn sich `vm.message` ändert, wird `vm.reversedMessage` ebenfalls aktualisiert.

Verwenden Sie die Funktion `computed`, um berechnete Eigenschaften zu definieren:

Beispiel

<template>
  <div>
    <p>Produktname:{{ productName }}</p>
    <p>Produktpreis:{{ formattedPrice }}</p>
    <button @click="increasePrice">Preis erhöhen</button>
  </div>
</template>

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

export default {
  setup() {
    // reaktive Daten
    const state = reactive({
      name: 'Mobiltelefon',
      price: 2000
    });

    // berechnete Eigenschaft
    const productName = computed(() => {
      return`Rabatt ${state.name}`;
    });

    const formattedPrice = computed(() => {
      return `￥${state.price.toFixed(2)}`;
    });

    // Methode
    const increasePrice = () => {
      state.price += 100;
    };

    return {
      productName,
      formattedPrice,
      increasePrice
    };
  }
};
</script>

Beschreibung

computedFunktion:

  • InsetupWird in der Funktion verwendetcomputedVerwenden Sie eine Funktion, um berechnete Eigenschaften zu definieren.
  • Geben Sie den berechneten Wert durch eine Arrow-Funktion zurück, die automatisch die reaktiven Daten verfolgt, von denen sie abhängt (stateim Objektnameundprice）。

Berechnete Eigenschaften verwenden:

  • productNameBerechnete Eigenschaften werden abgeleitet ausstate.name, wann immerstate.namewenn Änderungen auftreten,productNamewird es automatisch aktualisiert.
  • formattedPriceBerechnete Eigenschaften werden abgeleitet ausstate.price, wann immerstate.pricewenn Änderungen auftreten,formattedPricewird es automatisch aktualisiert.

reaktive Daten:

  • Verwenden SiereactiveFunktion erstelltstateObjekt, das es zu reaktiven Daten macht, sodass du Änderungen an seinen Eigenschaften überwachen kannst.

Methode:

  • increasePriceDie Methode wird verwendet, umstate.priceden Wert zu erhöhen, und jedes Mal, wenn auf die Schaltfläche geklickt wird,state.priceerhöht sich der Wert um 100, undformattedPricedie berechnete Eigenschaft wird entsprechend aktualisiert.

computed vs methods

Wir können `methods` verwenden, um `computed` zu ersetzen. Der Effekt ist bei beiden derselbe, aber `computed` wird anhand seiner Abhängigkeiten zwischengespeichert und nur neu berechnet, wenn sich die zugehörigen Abhängigkeiten ändern. Bei `methods` wird die Funktion bei jedem erneuten Rendern immer wieder aufgerufen und ausgeführt.

Beispiel 3

methods: { reversedMessage2: function () { return this.message.split('').reverse().join('') } }

Ausprobieren »

Man kann sagen, dass die Verwendung von `computed` eine bessere Leistung bietet, aber wenn du keine Zwischenspeicherung möchtest, kannst du die Eigenschaft `methods` verwenden.

computed-Setter

Berechnete Eigenschaften haben standardmäßig nur einen Getter, aber bei Bedarf kannst du auch einen Setter angeben:

Beispiel 4

const app = { data() { return { name: 'Google', url: 'http://www.google.com' } }, computed: { site: { // getter get: function () { return this.name + ' ' + this.url }, // setter set: function (newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } } vm = Vue.createApp(app).mount('#app') document.write('Name: ' + vm.name); document.write('<br>'); document.write('URL: ' + vm.url); document.write('<br>------ Daten aktualisieren ------<br>'); //Wenn der Setter aufgerufen wird, werden `vm.name` und `vm.url` ebenfalls entsprechend aktualisiert vm.site = 'Beispiel-Tutorial https://www.example.com'; document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url);

Ausprobieren »

Aus dem Ausführungsergebnis des Beispiels: Beim Ausführen vonvm.site = 'Example http://www.example.com';wennSetteraufgerufen wird,vm.nameundvm.urlwerden ebenfalls entsprechend aktualisiert.

Andere Erweiterungen