VueJS: pourquoi "ce" est-il indéfini?

Question

Je suis de la création d'un composant avec Vue.js.

Quand j'référence this dans tout le cycle de vie des crochets (created, mounted, updated, etc.) il évalue undefined:

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

---

La même chose est également produit à l'intérieur de mon propriétés calculées:

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

J'obtiens l'erreur suivante:

Uncaught TypeError: Cannot read property 'bar' undefined

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

Answer 1

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

Selon la documentation:

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

Afin d'obtenir la correcte référence à l' this comme la Vue par exemple, utiliser une fonction régulière:

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

Alternativement, vous pouvez également utiliser l' ECMAScript 5 abréviation pour une fonction:

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

Answer 2

Vous êtes à l'aide de la flèche fonctions.

La Vue de la Documentation stipule clairement de ne pas utiliser la flèche fonctions sur un bien ou un rappel.

À la différence d'une fonction régulière, une flèche fonction ne pas lier this. Au lieu de cela, this est lié lexicalement (c - this garde son sens à partir de son contexte d'origine).

var instance = new  Vue({
    el:'#instance',
  data:{
    valueOfThis:null
  },
  created: ()=>{
    console.log(this)
  }
});

Il enregistre l'objet suivant dans la console:

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

Alors que... Si nous utilisons une fonction régulière (ce qui nous doit une Vue de l'instance)

var instance = new  Vue({
    el:'#instance',
  data:{
    valueOfThis:null
  },
  created: function(){
    console.log(this)
  }
});

Les journaux de l'objet suivant dans la console:

hn {_uid: 0, _isVue: true, $options: {…}, _renderProxy: hn, _self: hn, …}