Detaillierte Erläuterung der berechneten Funktion in Vue3: eine Anwendung, die die Verwendung berechneter Eigenschaften erleichtert

Vue ist ein sehr beliebtes Front-End-Entwicklungsframework. Es bietet eine sehr praktische und praktische Funktion zur Berechnung von Attributen. In Vue3 wurde auch die berechnete Funktion aktualisiert und verbessert, wodurch sie einfacher zu verwenden und effizienter ist.

computed ist zunächst eine Funktion, die einen Wert zurückgibt, der direkt in Vues Vorlage verwendet werden kann. Das Besondere an der berechneten Funktion ist, dass sich ihr Rückgabewert entsprechend den Daten der Vue-Instanz, von der sie abhängt, dynamisch ändert und die berechnete Funktion träge ausgewertet wird. Solange sich die abhängigen Daten nicht ändern, ändert sich dies auch bei der berechneten Funktion nicht neu berechnen.

In Vue3 wurde die berechnete Funktion erheblich verbessert. Wenn Sie in Vue2 die berechnete Funktion verwenden möchten, müssen Sie ein Objekt an die Vue-Instanz übergeben. Dieses Objekt enthält zwei Methoden, Getter und Setter. Wir müssen dann den erforderlichen Wert in der Getter-Methode berechnen Aktualisieren Sie andere Werte in der Setter-Methode. Es scheint sehr mühsam und anfällig für doppelten Code und Fehler zu sein. In Vue3 müssen wir nur Berechnungen direkt in der berechneten Funktion durchführen, und Vue übernimmt automatisch die aktualisierte Logik für uns.

Zum Beispiel haben wir eine Vue-Instanz mit den folgenden Daten:

const vm = Vue.createApp({
  data() {
    return {
      firstName: '张',
      lastName: '三',
    }
  },
  computed: {
    fullName() {
      return this.firstName + this.lastName;
    }
  },
  template: `<div>{{fullName}}</div>`
}).mount('#app');

In dieser Vue-Instanz haben wir zwei responsive Attribute „firstName“ und „lastName“ definiert, die den beiden Eingabefeldern in der Vorlage entsprechen die Kiste. In der berechneten Funktion definieren wir eine fullName-Funktion, die das Spleißergebnis von firstName und lastName zurückgibt, also dem vom Benutzer eingegebenen vollständigen Namen. In der Vorlage verwenden wir direkt die Funktion fullName.

Im obigen Beispiel ist die berechnete Funktion sehr einfach. Sie führt lediglich eine einfache Zeichenfolgenverkettung durch, aber alle Berechnungen werden in der berechneten Funktion und nicht in der Vorlage durchgeführt. Dies macht den Code nicht nur klarer und verständlicher, sondern verbessert auch die Leistung, da berechnete Funktionen nur dann neu berechnet werden, wenn sich die Daten ändern.

In Vue3 stellt die berechnete Funktion auch eine neue API bereit, mit der wir Getter- und Setter-Methoden in der berechneten Funktion definieren können, sodass wir den erforderlichen Wert in der Getter-Methode berechnen und die Datenverarbeitung in der Setter-Methode durchführen können Aktualisierungen und Benachrichtigungen.

const vm = Vue.createApp({
  data() {
    return {
      firstName: '张',
      lastName: '三',
    }
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + this.lastName;
      },
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[1];
      }
    }
  },
  template: `<div>
               <input v-model="fullName"/>
               {{fullName}}
             </div>`
}).mount('#app');

In diesem Beispiel definieren wir die Eigenschaft fullName in der berechneten Funktion, die Getter- und Setter-Methoden enthält. In der Getter-Methode berechnen wir den Wert von fullName wie im vorherigen Beispiel. Bei der Setter-Methode erhalten wir einen Parameterwert, bei dem es sich um den vom Benutzer eingegebenen vollständigen Namen handelt. In der Setter-Methode teilen wir den vollständigen Namen durch Leerzeichen in Vorname und Nachname auf und weisen sie dann den entsprechenden Eigenschaften der Vue-Instanz zu. Auf diese Weise können wir fullName in das Eingabefeld eingeben und dann die Berechnungsergebnisse durch bidirektionale Bindung in der Vorlage anzeigen.

Zusammenfassend lässt sich sagen, dass die berechnete Funktion in Vue3 die Verwendung berechneter Eigenschaften erheblich vereinfacht. Wir können die gesamte Berechnungs- und Aktualisierungslogik direkt in der berechneten Funktion abschließen, anstatt wie bisher manuell Getter- und Setter-Methoden zu definieren. Diese Verbesserung macht den Code nicht nur prägnanter und verständlicher, sondern verbessert auch die Recheneffizienz und -leistung. Wenn Sie Vue3 verwenden, wird dringend empfohlen, berechnete Funktionen zum Berechnen und Verarbeiten von Daten zu verwenden.

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