Pourquoi les fonctions fléchées interrompent-elles les propriétés calculées de Vue et comment puis-je les corriger ?

Utiliser les fonctions fléchées dans les propriétés calculées de Vue : dépannage

Dans Vue, les propriétés calculées sont utilisées pour dériver des valeurs réactives à partir d'autres propriétés. Bien que les fonctions fléchées puissent simplifier le code dans de nombreux scénarios, elles peuvent être problématiques lorsqu'elles sont utilisées dans des propriétés calculées.

Code original (fonctionnel) :

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  computed: {
    switchRed: function () {
      return { red: this.turnRed };
    },
    switchGreen: function () {
      return { green: this.turnGreen };
    },
    switchBlue: function () {
      return { blue: this.turnBlue };
    }
  }
});

Code modifié (ne fonctionne pas) :

Cependant, lorsque vous modifiez les méthodes dans les propriétés calculées à l'aide de fonctions fléchées, le comportement changements :

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

Explication :

La cause première de ce problème est que les fonctions fléchées ne le lient pas à l'instance Vue. Au lieu de cela, ils héritent du contexte de la portée parent. Dans ce cas, la portée parent est la portée globale, elle fait donc référence à l'objet window plutôt qu'à l'instance Vue attendue. Par conséquent, les valeurs turnRed, turnGreen et turnBlue restent non initialisées, ce qui conduit à des couleurs inchangées.

Solution :

Pour résoudre ce problème et faire fonctionner les fonctions fléchées dans les propriétés calculées , Vue recommande d'utiliser la méthode bind pour lier explicitement ceci à l'instance Vue :

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

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!