ES6 Pfeil Funktion 'this' Puzzle in vue.js offiziellen Github Beispiel

Question

Hier ist die meine Gabel von Github Beispiel Geige von vue.js offcial site: vue.js github example fiddle

I console.log(this) in FetchData Funktion Ausdruck, und es gibt vue Komponenteninstanz:

Aber wenn ich Pfeil Funktion mit FetchData verwenden (fiddle of arrow function this), es console.log(this) ist window

Ich hatte Pfeilfunktionskonzept gelernt, aber ich verwechsele immer noch this. Warum die zweite Geige this binden an die globale Fenster Objekt, und die erste Geige this Bindung an vue Komponente Instanz?

In welchen Zustand kann ich die Pfeilfunktion this nicht verwenden?

Answer 1

Sie sollten nie einen Pfeil Funktion verwenden, um ein Verfahren mit Vue, weil mit Pfeil Funktionen zu definieren, this ist defined lexically.

Eine Pfeilfunktion erstellt keine eigenen Dies wird der Wert umschließenden Ausführungskontext verwendet.

Das bedeutet, dass mit Vue-Methoden this auf das globale Objekt oder das Fenster zeigt.

Wenn ein Vue instanziiert wird, bindet Vue die in methods definierten Methoden an das Vue-Objekt. Eine Pfeilfunktion kann nicht gebunden werden. Es ist this wird immer das sein, was es ursprünglich war.

Das ist der Fall, sollten Sie immer eine normale Funktion verwenden, um eine Vue-Methode zu schreiben.

Dies gilt auch für die Datenfunktion, berechnete Werte und Lebenszyklus-Hooks. Die einzige Zeit, die Sie normalerweise eine Pfeilfunktion verwenden, ist, wenn Sie eine Funktion innerhalb einer Ihrer Methoden oder berechneten Werte definieren, wie Sie möglicherweise beim Definieren eines Rückrufs für einen AJAX-Aufruf.

Siehe VueJS: why is “this” undefined?.

Hinweis: Es gibt ein Ausnahme nie eine Vue Methode einen Pfeil Funktion zu definieren, verwenden und das wäre, wenn Sie überhaupt nicht in dem Verfahren thisverwiesen. Diese Fälle sind äußerst selten. Sie müssen fast immer auf andere Teile des Vue innerhalb einer Methode mit this verweisen. In diesem Fall sollte es schnell zur Gewohnheit werden, einfach keine Vue-Methode mit einer Pfeilfunktion zu definieren.