Warum werden meine von Vue berechneten Eigenschaften nicht aktualisiert, wenn Pfeilfunktionen verwendet werden?

Verwenden von Pfeilfunktionen in berechneten Eigenschaften von Vue

In Vue können Pfeilfunktionen zum Definieren berechneter Eigenschaften verwendet werden. Allerdings kann es bei Benutzern zu einem Problem kommen, bei dem sich die Farbe ihres berechneten Elements nicht ändert, wenn sie Pfeilfunktionen verwenden.

Vergleich von Original- und geändertem Code

Der Originalcode verwendet traditionelle Funktionssyntax, um berechnete Eigenschaften zu definieren:

computed: {
  switchRed: function() {
    return { red: this.turnRed };
  },
  switchGreen: function() {
    return { green: this.turnGreen };
  },
  switchBlue: function() {
    return { blue: this.turnBlue };
  }
}

Nachdem der Code geändert wurde, um Pfeilfunktionen zu verwenden, trat das Problem auf entsteht:

computed: {
  switchRed: () => {
    return { red: this.turnRed };
  },
  switchGreen: () => {
    return { green: this.turnGreen };
  },
  switchBlue: () => {
    return { blue: this.turnBlue };
  }
}

Grundursache

Das Problem liegt in der Verwendung von Pfeilfunktionen. Pfeilfunktionen erben ihren Kontext vom übergeordneten Element, während die herkömmliche Funktionssyntax diesen an die Vue-Instanz bindet. Bei der Verwendung von Pfeilfunktionen in berechneten Eigenschaften ist dies nicht an die Vue-Instanz gebunden, was dazu führt, dass die Farbe des berechneten Elements nicht aktualisiert werden kann.

Lösung

Zu Um das Problem zu beheben, wird empfohlen, für berechnete Eigenschaften die herkömmliche Funktionssyntax zu verwenden. Alternativ kann man Pfeilfunktionen für Methoden verwenden, es ist jedoch wichtig, diese mithilfe der bind- oder apply-Methoden explizit an die Vue-Instanz zu binden.

Das obige ist der detaillierte Inhalt vonWarum werden meine von Vue berechneten Eigenschaften nicht aktualisiert, wenn Pfeilfunktionen verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!