Pourquoi « ceci » n'est-il plus défini dans les hooks de cycle de vie et les propriétés calculées de Vue.js ?

VueJS : "this" non défini dans les hooks de cycle de vie et les propriétés calculées

Dans Vue.js, vous pouvez rencontrer des situations où l'accès à "this" " Le mot-clé dans les hooks de cycle de vie ou les propriétés calculées renvoie « non défini ». Cela se produit lorsque des fonctions fléchées sont utilisées.

Cause :

Fonctions fléchées () => {} liez le mot-clé "this" au contexte en dehors de l'instance Vue. Cela signifie que « ceci » dans une fonction fléchée fait référence à la portée parent, et non à l'instance Vue elle-même.

Exemple 1 :

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

Dans cet exemple, la fonction de flèche utilisée pour le hook "monté" ne lie pas "this" à l'instance Vue.

Exemple 2 :

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

Ici, la propriété calculée utilise une fonction de flèche, ce qui provoque l'évaluation de la référence à "this.bar" comme étant indéfini, ce qui entraîne l'erreur "Impossible de lire la propriété 'bar' de non défini."

Solution :

Pour résoudre ce problème et accéder à la référence correcte à "ceci", utilisez les fonctions normales ou le raccourci ES5 :

Fonction régulière :

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

Raccourci ES5 :

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

En utilisant ces approches, vous vous assurez que « ceci » fait référence à l'instance Vue 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!