Pourquoi les fonctions fléchées dans les propriétés calculées de Vue provoquent-elles parfois un comportement inattendu ?

Utilisation des fonctions fléchées dans les propriétés calculées de Vue : comprendre les pièges

Dans Vue.js, les fonctions fléchées peuvent être utilisées pour simplifier la syntaxe de propriétés calculées. Cependant, l'utilisation de fonctions fléchées dans les propriétés calculées peut entraîner un comportement inattendu si elle n'est pas utilisée correctement.

Définition de fonction incorrecte

Considérez l'extrait de code Vue suivant :

computed: {
  switchRed: () => {
    return { red: this.turnRed }
  },
  switchGreen: () => {
    return { green: this.turnGreen }
  },
  switchBlue: () => {
    return { blue: this.turnBlue }
  }
}

Lors de l'utilisation de fonctions fléchées dans des propriétés calculées, il est crucial d'être conscient de leur comportement de portée. Les fonctions fléchées ne lient pas le mot-clé this à l'instance Vue. Au lieu de cela, ils héritent de cette liaison du contexte environnant, qui dans ce cas est la portée globale du composant Vue.

Conséquences d'une définition incorrecte

En conséquence En raison de la définition de fonction incorrecte, le mot-clé this dans les propriétés calculées ne fait pas référence à l'instance Vue, mais plutôt à l'instance globale Vue.js. Cela conduit à une erreur de référence non définie pour les propriétés turnRed, turnGreen et turnBlue. Par conséquent, les propriétés calculées renverront un objet vide et le comportement de changement de couleur ne fonctionnera pas comme prévu.

Définition correcte de la fonction

Pour résoudre ce problème, nous avons besoin pour lier explicitement ce contexte à l'instance Vue. Pour ce faire, nous pouvons utiliser la syntaxe de fonction traditionnelle :

computed: {
  switchRed: function() {
    return { red: this.turnRed }
  },
  switchGreen: function() {
    return { green: this.turnGreen }
  },
  switchBlue: function() {
    return { blue: this.turnBlue }
  }
}

En utilisant la syntaxe de fonction traditionnelle, nous nous assurons que le mot-clé this dans les propriétés calculées fait référence à l'instance de Vue. Cela permet aux propriétés calculées d'accéder et de manipuler les données de l'instance Vue comme prévu.

Remarque importante

Il est important de respecter les conseils de la documentation Vue.js lors de l'utilisation de la flèche fonctions. Selon la documentation, "N'utilisez pas de fonctions fléchées sur une propriété d'instance ou un rappel (par exemple vm.$watch('a', newVal => this.myMethod())). Comme les fonctions fléchées sont liées au contexte parent , ce ne sera pas l'instance Vue comme vous vous en doutez et this.myMethod ne sera pas 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!