VueJS: pourquoi "ceci" n'est-il pas défini?

Je crée un composant avec Vue.js.

Lorsque je fais référence à this dans l'un des crochets du cycle de vie ( created , mounted , updated , etc.), il est évalué comme undefined :

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

La même chose se passe également dans mes propriétés calculées:

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

Je reçois l'erreur suivante:

Uncaught TypeError: Impossible de lire la propriété 'bar' de undefined

Pourquoi this évaluation n'est- this pas undefined dans ces cas?

Ces deux exemples utilisent une fonction flèche () => { } , ce qui lie this à un contexte différent de l'instance Vue.

Selon la documentation :

N'utilisez pas les fonctions de flèche sur une propriété d'instance ou un rappel (p vm.$watch('a', newVal => this.myMethod()) Ex vm.$watch('a', newVal => this.myMethod()) ). Comme les fonctions de la flèche sont liées au contexte parent, this ne sera pas l'occurrence de Vue que vous attendez et this.myMethod sera indéfini.

Afin d'obtenir la référence correcte à this tant qu'exemption Vue, utilisez une fonction régulière:

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

Alternativement, vous pouvez également utiliser la sténographie ECMAScript 5 pour une fonction:

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

Voir aussi Utilisation de "this" dans Vue .