Pourquoi les fonctions fléchées brisent-elles les propriétés calculées dans Vue.js ?

Utilisation de la fonction flèche dans les propriétés Vue calculées

Dans Vue.js, la gestion des données et de la logique dans les propriétés calculées est cruciale. Cependant, l'utilisation de fonctions fléchées dans ces propriétés calculées peut entraîner un comportement inattendu.

À l'origine, l'utilisation de déclarations de fonctions traditionnelles pour les propriétés calculées fonctionnait comme prévu, comme le montre cet extrait de code :

computed: {
  switchRed: function() {
    return { red: this.turnRed };
  },
  // ... other computed properties
}

Cependant, le passage aux fonctions fléchées dans les propriétés calculées a entraîné un problème où les changements de couleur ont cessé de fonctionner, même si les valeurs étaient correctement mises à jour.

computed: {
  switchRed: () => {
    return { red: this.turnRed };
  },
  // ... other computed properties
}

Ce problème se produit parce que les fonctions fléchées ne lient pas le contexte this à l'instance Vue pour laquelle la propriété calculée est définie. Normalement, les propriétés calculées lient cela à l'instance, permettant l'accès aux données et méthodes de l'instance. Cependant, avec les fonctions fléchées, cela conserve le contexte de son parent, qui est généralement la portée globale en JavaScript et non l'instance Vue.

En conséquence, this.turnRed devient indéfini dans la fonction flèche, provoquant le le changement de couleur échoue. Ce comportement est documenté dans la documentation Vue.js, qui déconseille d'utiliser des fonctions fléchées pour les propriétés d'instance ou les rappels pour cette raison.

Pour résoudre ce problème, revenez à l'utilisation des déclarations de fonction traditionnelles pour les propriétés calculées, assurer une bonne liaison de ceci.

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!