Warum ist „dies' in Vue.js-Komponenten mit Pfeilfunktionen undefiniert?

Unerwarteter undefinierter Wert für „this“ in Vue.js-Komponenten

Beim Erstellen von Vue.js-Komponenten Zugriff auf „this“ innerhalb von Lebenszyklus-Hooks oder berechnete Eigenschaften können zu unerwarteten „undefinierten“ Ergebnissen führen. Pfeilfunktionen, gekennzeichnet durch die Syntax „() => {}“, ändern die Bindung von „this“ außerhalb des Vue-Instanzkontexts.

Lifecycle Hooks

Im bereitgestellten Beispiel:

mounted: () => {
  console.log(this); // logs "undefined"
},

Die Pfeilfunktion bindet „this“ an einen Bereich außerhalb der Vue-Instanz, was zu einem „undefinierten“ führt. Auswertung.

Berechnete Eigenschaften

Ähnlich gilt innerhalb berechneter Eigenschaften:

computed: {
  foo: () => { 
    return this.bar + 1; 
  } 
}

Die Pfeilfunktion erstellt eine andere Bindung für „dies“, was zu „this“ führt in der „Eigenschaft ‚Leiste‘ von undefiniert kann nicht gelesen werden“ Fehler.

Lösung

Um dieses Problem zu beheben und den korrekten Verweis auf „this“ als Vue-Instanz sicherzustellen, sollten Sie die folgenden Techniken in Betracht ziehen:

1. Reguläre Funktion: Verwenden Sie eine reguläre Funktionssyntax, wie gezeigt von:

mounted: function () {
  console.log(this);
}

2. ECMAScript 5 Kurzschrift: Alternativ können Sie die ECMAScript 5-Funktionskurzschrift verwenden:

mounted() {
  console.log(this);
}

Durch den Einsatz dieser Methoden können Sie die ordnungsgemäße Bindung von „this“ innerhalb der Vue.js-Komponenten herstellen und so den Zugriff auf die Eigenschaften und Methoden der Komponente sicherstellen wie erwartet.

Das obige ist der detaillierte Inhalt vonWarum ist „dies' in Vue.js-Komponenten mit Pfeilfunktionen undefiniert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!