Warum verursachen Pfeilfunktionen in Vue-berechneten Eigenschaften manchmal unerwartetes Verhalten?

Pfeilfunktionen in Vue Computed Properties verwenden: Die Fallstricke verstehen

In Vue.js können Pfeilfunktionen verwendet werden, um die Syntax von zu vereinfachen berechnete Eigenschaften. Die Verwendung von Pfeilfunktionen in berechneten Eigenschaften kann jedoch bei unsachgemäßer Verwendung zu unerwartetem Verhalten führen.

Falsche Funktionsdefinition

Beachten Sie den folgenden Vue-Codeausschnitt:

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

Bei der Verwendung von Pfeilfunktionen in berechneten Eigenschaften ist es wichtig, sich ihres Bereichsverhaltens bewusst zu sein. Pfeilfunktionen binden das Schlüsselwort this nicht an die Vue-Instanz. Stattdessen erben sie diese Bindung vom umgebenden Kontext, der in diesem Fall der globale Geltungsbereich der Vue-Komponente ist.

Folgen einer falschen Definition

Als Ergebnis Aufgrund der falschen Funktionsdefinition bezieht sich das Schlüsselwort this in den berechneten Eigenschaften nicht auf die Vue-Instanz, sondern auf die globale Vue.js-Instanz. Dies führt zu einem undefinierten Referenzfehler für die Eigenschaften turnRed, turnGreen und turnBlue. Folglich geben die berechneten Eigenschaften ein leeres Objekt zurück und das Farbänderungsverhalten funktioniert nicht wie erwartet.

Korrekte Funktionsdefinition

Um dieses Problem zu beheben, benötigen wir um diesen Kontext explizit an die Vue-Instanz zu binden. Dazu können wir die traditionelle Funktionssyntax verwenden:

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

Durch die Verwendung der traditionellen Funktionssyntax stellen wir sicher, dass sich das Schlüsselwort this in den berechneten Eigenschaften auf die Vue-Instanz bezieht. Dadurch können die berechneten Eigenschaften wie vorgesehen auf die Daten der Vue-Instanz zugreifen und diese bearbeiten.

Wichtiger Hinweis

Bei der Verwendung des Pfeils ist es wichtig, die Anleitungen der Vue.js-Dokumentation einzuhalten Funktionen. In der Dokumentation heißt es: „Verwenden Sie keine Pfeilfunktionen für eine Instanzeigenschaft oder einen Rückruf (z. B. vm.$watch('a', newVal => this.myMethod())). Da Pfeilfunktionen an den übergeordneten Kontext gebunden sind , dies wird nicht die Vue-Instanz sein, wie Sie es erwarten würden, und this.myMethod wird undefiniert sein.“

Das obige ist der detaillierte Inhalt vonWarum verursachen Pfeilfunktionen in Vue-berechneten Eigenschaften manchmal unerwartetes Verhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!