Warum ist „dies' in Vue.js-Komponenten und berechneten Eigenschaften mithilfe von Pfeilfunktionen undefiniert?

Warum ist der Verweis auf „dieses“ in Vue.js-Komponenten und berechneten Eigenschaften undefiniert?

In Vue.js werden Komponenten definiert und Die Verwendung berechneter Eigenschaften erfordert die Arbeit mit dem Schlüsselwort „this“. Entwickler stoßen jedoch häufig auf das Problem, dass „dies“ in bestimmten Szenarien als „undefiniert“ ausgewertet wird. Dieser Artikel soll klären, warum dies auftritt, und Lösungen bereitstellen.

Bei der Verwendung von Pfeilfunktionen (z. B. () => {}) in Lebenszyklus-Hooks (z. B. „mounted“ und „update“) oder berechneten Eigenschaften wird der Wert von „this“ kann von der beabsichtigten Vue-Instanz abweichen. In der Vue.js-Dokumentation wird ausdrücklich von der Verwendung von Pfeilfunktionen in solchen Kontexten abgeraten. Stattdessen sollten Entwickler reguläre Funktionen oder die Kurzschriftsyntax von ECMAScript 5 verwenden, um sicherzustellen, dass „dies“ die Vue-Instanz ordnungsgemäß referenziert.

Betrachten Sie das Beispiel einer Komponente:

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

In diesem Fall die Pfeilfunktion () => {} bindet „this“ an einen anderen Kontext außerhalb der Vue-Komponente. Folglich schlägt der Zugriff auf Eigenschaften oder Methoden mit „this“ außerhalb der Funktion fehl.

Ähnlich gilt bei einer berechneten Eigenschaft:

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

Die Wertauswertung der berechneten Eigenschaft mithilfe der Pfeilfunktion () = > {} führt auch dazu, dass „this“ undefiniert ist. Dies führt zu dem Fehler „Eigenschaft ‚Leiste‘ von undefiniert kann nicht gelesen werden.“

Um dieses Problem zu beheben, können reguläre JavaScript-Funktionen oder die Abkürzung ECMAScript 5 verwendet werden:

mounted: function () {
  console.log(this); // correctly logs the Vue instance
}

mounted() {
  console.log(this); // also correctly logs the Vue instance
}

Diese Beispiele zeigen, wie reguläre Funktionen oder ECMAScript 5-Kurzschrift „this“ entsprechend an die Vue-Komponenteninstanz binden und so das Problem lösen, bei dem „this“ als „undefiniert“ ausgewertet wird.

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