web-dev-qa-db-fra.com

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

Je crée un composant avec Vue.js .

Lorsque je fais référence à this dans l'un des hooks cycle de vie (created, mounted, updated, etc.), il évalue à 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 indéfinie

Pourquoi this évalue-t-il undefined dans ces cas?

javascriptvue.jsthisvuejs2
42
thanksd

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

Selon le documentation :

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

Pour obtenir la référence correcte à this en tant qu'instance Vue, utilisez une fonction régulière:

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

Alternativement, vous pouvez également utiliser le raccourci ECMAScript 5 pour une fonction:

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

Vous utilisez fonctions de flèche .

Le Vue Documentation indique clairement de ne pas utiliser les fonctions de flèche sur une propriété ou un rappel.

Contrairement à une fonction normale, une fonction de flèche ne lie pas this. Au lieu de cela, this est lié lexicalement (c.-à-d. this conserve son sens par rapport à son contexte d'origine).

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

Cela enregistre l'objet suivant dans la console:

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

Considérant que ... Si nous utilisons une fonction régulière (que nous devrions sur une instance Vue)

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

Journalise l'objet suivant dans la console:

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

3
Ashutosh Narang