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

Valeur inattendue non définie pour "this" dans les composants Vue.js

Lors de la construction de composants Vue.js, accès à "this" dans les hooks de cycle de vie ou les propriétés calculées peuvent donner des résultats « non définis » inattendus. Les fonctions fléchées, désignées par la syntaxe "() => {}", modifient la liaison de "this" en dehors du contexte de l'instance Vue.

Lifecycle Hooks

Dans l'exemple fourni :

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

La fonction flèche lie "this" à une portée en dehors de l'instance Vue, conduisant à un "indéfini" évaluation.

Propriétés calculées

De même, dans les propriétés calculées :

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

La fonction flèche crée une liaison différente pour "ceci", ce qui entraîne dans la zone "Impossible de lire la propriété 'bar' de non définie" erreur.

Solution

Pour résoudre ce problème et garantir la référence correcte à « ceci » en tant qu'instance Vue, envisagez d'utiliser les techniques suivantes :

1. Fonction régulière : Utilisez une syntaxe de fonction régulière, comme démontré par :

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

2. ECMAScript 5 Shorthand : Alternativement, vous pouvez utiliser le raccourci de la fonction ECMAScript 5 :

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

En employant ces méthodes, vous pouvez établir la liaison appropriée de « ceci » dans les composants Vue.js, garantissant ainsi l'accessibilité aux propriétés et méthodes du composant. attendu.

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!