Detaillierte Erläuterung der berechneten Funktion in Vue3: bequeme Verwendung berechneter Eigenschaften

Detaillierte Erklärung der berechneten Funktion in Vue3: Bequeme Verwendung berechneter Eigenschaften

Berechnete Eigenschaften sind eine häufig verwendete Methode in Vue. Sie werden hauptsächlich verwendet, um logische Berechnungen in Vorlagen zu platzieren, um die Datenbearbeitung und -anzeige durch Entwickler zu erleichtern. In Vue3 sind berechnete Eigenschaften immer noch eine sehr wichtige Funktion, und berechnete Funktionen sind bequemer für die Verwendung berechneter Eigenschaften. Dieser Artikel bietet eine detaillierte Einführung und Erklärung der berechneten Funktion in Vue3.

Was ist die berechnete Funktion?

Die berechnete Funktion ist eine integrierte Funktion in Vue3. Sie wird hauptsächlich zum Erstellen einer berechneten Eigenschaft verwendet. Mithilfe der berechneten Funktion können wir auf einfache Weise eine berechnete Eigenschaft erstellen und so den Code prägnanter und lesbarer machen. Die berechnete Funktion wird in der Komponenteninstanz funktional deklariert und automatisch aktualisiert, wenn sich die reaktiven Variablen ändern, von denen die berechnete Eigenschaft abhängt.

Grundlegende Verwendung einer berechneten Funktion

Um eine berechnete Funktion zum Erstellen einer berechneten Eigenschaft zu verwenden, müssen Sie lediglich eine funktionale Eigenschaft in der Komponente deklarieren. Hier ist ein einfacher Beispielcode, der die berechnete Funktion verwendet, um eine berechnete Eigenschaft zu erstellen:

<template>
  <div>
    <p>原来的值：{{ multiplied }}</p>
    <p>改变后的值：{{ multipliedByTwo }}</p>
    <button @click="updateValue">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 10,
    }
  },
  computed: {
    multiplied() {
      return this.value * 2
    },
    multipliedByTwo() {
      return this.multiplied * 2
    },
  },
  methods: {
    updateValue() {
      this.value = 20
    }
  }
}
</script>

Im obigen Beispielcode haben wir einen Datenattributwert definiert, der den ursprünglichen Wert der berechneten Eigenschaft darstellt. Durch die berechnete Funktion werden zwei berechnete Eigenschaften erstellt, nämlich multiplid und multipliedByTwo. Unter diesen hängt multipliziert von der Wertvariablen im Datenattribut ab, während multipliedByTwo von multipliziert abhängt. Auf diese Weise können wir leicht berechnete Eigenschaften ermöglichen und relevante Werte in Echtzeit berechnen.

Erweiterte Verwendung der berechneten Funktion

Die berechnete Funktion verfügt auch über einige erweiterte Verwendungsmöglichkeiten, mit denen das Verhalten berechneter Eigenschaften besser gesteuert werden kann. Sie werden im Folgenden einzeln vorgestellt.

1. Getter und Setter

Die berechnete Funktion kann das Lesen und Aktualisieren berechneter Eigenschaften durch Getter und Setter steuern. Getter sind Lesefunktionen für berechnete Eigenschaften und Setter sind Aktualisierungsfunktionen für berechnete Eigenschaften. Standardmäßig sind berechnete Eigenschaften schreibgeschützt und können nicht geändert werden, aber über die Setters-Funktion können wir den Wert der berechneten Eigenschaft direkt ändern, um den Zweck der erzwungenen Aktualisierung zu erreichen.

Das Folgende ist ein Beispielcode einer berechneten Eigenschaft mit Getter- und Setter-Funktionen:

<template>
  <div>
    <p>原来的价格：{{ price }}</p>
    <p>折扣后的价格：{{ discountedPrice }}</p>
    <button @click="applyDiscount">打折</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalPrice: 100,
      discountPercentage: 10
    }
  },
  computed: {
    price: {
      get() {
        return this.originalPrice
      },
      set(newPrice) {
        this.originalPrice = newPrice
      }
    },
    discountedPrice() {
      const discount = this.discountPercentage / 100
      return this.price - (this.price * discount)
    }
  },
  methods: {
    applyDiscount() {
      this.price = this.price - 10
    }
  }
}
</script>

Im obigen Beispielcode deklarieren wir einen berechneten Attributpreis und definieren seine Getter- und Setter-Funktionen. discountedPrice hängt vom Preis ab. Wenn sich der Preis ändert, wird discountedPrice automatisch aktualisiert. Darüber hinaus haben wir auch eine Methode applyDiscount definiert, die durch Ausführen dieser Methode den berechneten Attributpreis direkt ändern kann, sodass eine erzwungene Aktualisierung des berechneten Attributs erreicht werden kann.

2. Zwischenspeicherung berechneter Eigenschaften

In Vue3 ist die Zwischenspeicherung berechneter Eigenschaften standardmäßig aktiviert. Das bedeutet, dass, wenn sich die abhängigen Variablen der berechneten Eigenschaft nicht geändert haben, die berechnete Eigenschaft direkt das letzte Ergebnis zurückgibt, anstatt eine Neuberechnung durchzuführen. Dies spart Rechenzeit und Leistung und verbessert die Effizienz der Codeausführung.

Das Folgende ist ein Beispielcode für das Zwischenspeichern berechneter Attribute:

<template>
  <div>
    <p>原来的数量：{{ count }}</p>
    <p>倍数：{{ multiplier }}</p>
    <p>计算结果：{{ computedValue }}</p>
    <button @click="updateCount">更新数量</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      multiplier: 2
    }
  },
  computed: {
    computedValue() {
      console.log('计算属性执行')
      return this.count * this.multiplier
    }
  },
  methods: {
    updateCount() {
      this.count++
    }
  }
}
</script>

Im obigen Beispielcode deklarieren wir ein berechnetes Attribut „computedValue“, das zur Berechnung des Produkts aus Anzahl und Multiplikator verwendet wird. Nach dem bereitgestellten Lebenszyklus wird die berechnete Eigenschaft einmal ausgeführt und der Cache der berechneten Eigenschaft wird aktiviert. In der Methode „updateCount“ lösen wir die Neuberechnung von „computedValue“ aus, indem wir den Wert der Zählvariablen aktualisieren. Zu diesem Zeitpunkt können Sie in der Konsole feststellen, dass die berechnete Eigenschaft nur dann neu berechnet wird, wenn sich der Wert ändert.

Wenn Sie das Caching berechneter Eigenschaften nicht aktivieren möchten, können Sie die Ref-Funktion in der berechneten Funktion verwenden. Die Ref-Funktion gibt ein reaktionsfähiges Objekt zurück und die Berechnungsfunktion wird jedes Mal neu berechnet, wenn auf das Objekt zugegriffen wird.

import Vue, { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const computedValue = () => {
      console.log('计算属性执行')
      return count.value * 2
    }

    return {
      count,
      computedValue
    }
  }
}

Zusammenfassung

Die berechnete Funktion ist eine sehr wichtige Funktion in Vue3. Sie bietet uns eine sehr bequeme Möglichkeit, Daten durch die Erstellung berechneter Eigenschaften zu verwalten. Durch die Einleitung dieses Artikels glaube ich, dass die Leser ein grundlegendes Verständnis für berechnete Funktionen haben und einige fortgeschrittene Anwendungen und Techniken beherrschen. Bei der Entwicklung von Vue3 wird die Beherrschung der Verwendung berechneter Funktionen auf jeden Fall eine große Hilfe für unsere Codierungsarbeit sein.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der berechneten Funktion in Vue3: bequeme Verwendung berechneter Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!