Heim >Web-Frontend >js-Tutorial >Warum ist „dies' in Vue.js-Komponenten mit Pfeilfunktionen undefiniert?

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

Susan Sarandon
Susan SarandonOriginal
2024-11-28 14:06:14686Durchsuche

Why is

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);
}
  1. 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn