Pourquoi « ceci » n'est-il pas défini dans les composants Vue.js et les propriétés calculées à l'aide des fonctions fléchées ?

Pourquoi la référence à « ceci » n'est-elle pas définie dans les composants et les propriétés calculées de Vue.js ?

Dans Vue.js, définir les composants et l'utilisation des propriétés calculées implique de travailler avec le mot-clé « this ». Cependant, les développeurs rencontrent souvent le problème où « ceci » est évalué comme « non défini » dans certains scénarios. Cet article vise à clarifier pourquoi cela se produit et à proposer des solutions.

Lors de l'utilisation de fonctions fléchées (par exemple, () => {}) dans des hooks de cycle de vie (tels que montés et mis à jour) ou des propriétés calculées, la valeur de « ceci » peut différer de l'instance Vue prévue. La documentation Vue.js déconseille explicitement d'utiliser les fonctions fléchées dans de tels contextes. Au lieu de cela, les développeurs doivent utiliser des fonctions régulières ou la syntaxe abrégée ECMAScript 5 pour garantir que « ceci » fait référence à l'instance Vue de manière appropriée.

Prenons l'exemple d'un composant :

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

Dans ce cas, la fonction flèche () => {} lie « ceci » à un contexte différent en dehors du composant Vue. Par conséquent, l'accès aux propriétés ou aux méthodes en utilisant 'this' en dehors de la fonction échouera.

De même, dans une propriété calculée :

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

L'évaluation de la valeur de la propriété calculée à l'aide de la fonction flèche () = > {} entraînera également que « ceci » ne soit pas défini. Cela entraîne l'erreur "Impossible de lire la propriété 'bar' d'undéfini."

Pour corriger ce problème, des fonctions JavaScript classiques ou le raccourci ECMAScript 5 peuvent être utilisés :

mounted: function () {
  console.log(this); // correctly logs the Vue instance
}

mounted() {
  console.log(this); // also correctly logs the Vue instance
}

Ces exemples démontrent comment les fonctions régulières ou le raccourci ECMAScript 5 lient de manière appropriée « ceci » à l'instance du composant Vue, résolvant ainsi le problème où « ceci » est évalué à « non défini ».

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!