Warum zerstören Pfeilfunktionen berechnete Eigenschaften in Vue.js?

Pfeilfunktion in berechneten Vue-Eigenschaften verwenden

In Vue.js ist der Umgang mit Daten und Logik in berechneten Eigenschaften von entscheidender Bedeutung. Die Verwendung von Pfeilfunktionen innerhalb dieser berechneten Eigenschaften kann jedoch zu unerwartetem Verhalten führen.

Ursprünglich funktionierte die Verwendung herkömmlicher Funktionsdeklarationen für berechnete Eigenschaften wie erwartet, wie in diesem Codeausschnitt zu sehen ist:

computed: {
  switchRed: function() {
    return { red: this.turnRed };
  },
  // ... other computed properties
}

Allerdings führte der Wechsel zu Pfeilfunktionen in berechneten Eigenschaften zu einem Problem, bei dem die Farbänderungen nicht mehr funktionierten, obwohl die Werte korrekt aktualisiert wurden.

computed: {
  switchRed: () => {
    return { red: this.turnRed };
  },
  // ... other computed properties
}

Dieses Problem entsteht, weil Pfeilfunktionen den Kontext this nicht an die Vue-Instanz binden, für die die berechnete Eigenschaft definiert ist. Normalerweise binden berechnete Eigenschaften dies an die Instanz und ermöglichen so den Zugriff auf Instanzdaten und -methoden. Bei Pfeilfunktionen behält diese jedoch den Kontext ihres übergeordneten Elements bei, bei dem es sich normalerweise um den globalen Bereich in JavaScript und nicht um die Vue-Instanz handelt.

Dadurch wird this.turnRed innerhalb der Pfeilfunktion undefiniert, was dazu führt, dass Farbwechsel schlägt fehl. Dieses Verhalten ist in der Vue.js-Dokumentation dokumentiert, in der aus diesem Grund von der Verwendung von Pfeilfunktionen für Instanzeigenschaften oder Rückrufe abgeraten wird.

Um dieses Problem zu beheben, kehren Sie zur Verwendung herkömmlicher Funktionsdeklarationen für die berechneten Eigenschaften zurück. Gewährleistung einer ordnungsgemäßen Bindung.

Das obige ist der detaillierte Inhalt vonWarum zerstören Pfeilfunktionen berechnete Eigenschaften in Vue.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!