Pourquoi \'this\' n'est-il pas défini dans les fonctions fléchées de Vue.js ?

VueJS : Résoudre le problème non défini de « ce »

Les fonctions fléchées peuvent être un piège dans VueJS, conduisant à des valeurs non définies inattendues. En effet, les fonctions fléchées héritent du contexte de leur parent, plutôt que de se lier à l'instance Vue.

Hooks de cycle de vie

Lors de l'utilisation de fonctions fléchées dans des hooks de cycle de vie comme montés, cela ne fait pas référence à l'instance Vue. Au lieu de cela, il fait référence au contexte parent, qui est généralement un élément HTML ou le composant Vue qui a déclenché le hook monté.

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

Propriétés calculées

Fonctions fléchées dans les propriétés calculées conduisent également à des valeurs indéfinies. Comme ils héritent du contexte parent, cela ne fait pas référence à l'instance de Vue.

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

Cela entraîne l'erreur "Uncaught TypeError : Impossible de lire la propriété 'bar' de undefined".

Solution

Pour résoudre ce problème, utilisez des fonctions normales ou des raccourcis de fonctions ECMAScript 5 au lieu de la flèche fonctions :

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

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

En utilisant ces méthodes, vous pouvez vous assurer que cela fait toujours référence à l'instance Vue, fournissant le comportement attendu dans les hooks de cycle de vie et les propriétés calculées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!