Warum beschädigen Pfeilfunktionen die von Vue berechneten Eigenschaften und wie kann ich sie beheben?

Verwenden Sie Pfeilfunktionen in berechneten Eigenschaften von Vue: Fehlerbehebung

In Vue werden berechnete Eigenschaften verwendet, um reaktive Werte aus anderen Eigenschaften abzuleiten. Während Pfeilfunktionen den Code in vielen Szenarien vereinfachen können, können sie bei der Verwendung in berechneten Eigenschaften problematisch sein.

Originalcode (funktioniert):

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  computed: {
    switchRed: function () {
      return { red: this.turnRed };
    },
    switchGreen: function () {
      return { green: this.turnGreen };
    },
    switchBlue: function () {
      return { blue: this.turnBlue };
    }
  }
});

Geänderter Code (funktioniert nicht):

Wenn Sie jedoch die Methoden in berechneten Eigenschaften mithilfe von Pfeilfunktionen ändern, ändert sich das Verhalten Änderungen:

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

Erklärung:

Die Hauptursache für dieses Problem ist, dass Pfeilfunktionen dies nicht an die Vue-Instanz binden. Stattdessen erben sie den Kontext des übergeordneten Bereichs. In diesem Fall ist der übergeordnete Bereich der globale Bereich, sodass er sich auf das Fensterobjekt und nicht auf die erwartete Vue-Instanz bezieht. Folglich bleiben die Werte turnRed, turnGreen und turnBlue nicht initialisiert, was zu unveränderten Farben führt.

Lösung:

So beheben Sie dieses Problem und sorgen dafür, dass Pfeilfunktionen in berechneten Eigenschaften funktionieren , Vue empfiehlt die Verwendung der Bind-Methode, um dies explizit an die Vue-Instanz zu binden:

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

Das obige ist der detaillierte Inhalt vonWarum beschädigen Pfeilfunktionen die von Vue berechneten Eigenschaften und wie kann ich sie beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!