Explication de la fonction principale des propriétés 'computed' dans Vue.js

Les propriétés computed dans Vue.js sont des fonctions qui sont utilisées pour calculer un état dérivé basé sur des données réactives. Elles sont essentielles pour le traitement des propriétés qui dépendent d'autres valeurs de données dans les composants Vue.js.

Calcul des États Déprimés

Prenez, par exemple, un cas où vous avez un composant qui affiche le nom complet d'un utilisateur. Les parties de ce nom complet, le prénom et le nom, sont stockées séparément.

Au lieu d'ajouter une fonction pour concaténer ces deux valeurs à chaque fois qu'elles sont affichées, vous pouvez utiliser une propriété computed :

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

Dans cet exemple, fullName sera recalculée chaque fois que soit firstName ou lastName changent. C'est le principe de réactivité en action : Vue.js suit les dépendances de fullName et met à jour la valeur lorsque nécessaire.

Avantages des Propriétés Computed

Une grande chose à propos des propriétés computed est qu'elles sont mises en cache. Cela signifie qu'elles ne seront recalculées que lorsqu'une de leurs dépendances change, ce qui peut être un gain de performances significatif dans les situations où vous auriez autrement des calculs coûteux.

De plus, les propriétés 'computed' contribuent aussi à rendre le code plus lisible et organisé. Au lieu d'avoir des calculs logiques dans le modèle (template) ou des méthodes de surveillance des changements (watchers), vous pouvez centraliser cette logique dans une propriété 'computed'.

Utilisation de Getters et Setters avec Propriétés Computed

Vous pouvez également utiliser les getters et setters dans les propriétés computed, ce qui offre une plus grande flexibilité. Par exemple, vous pouvez diviser une entrée d'utilisateur en deux valeurs différentes. Avec un getter, vous pouvez combiner ces valeurs, et avec un setter, vous pouvez les diviser à nouveau.

computed: {
  fullName: {
    get: function () {
      return this.firstName + ' ' + this.lastName;
    },
    set: function (newValue) {
      var names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
  }
}

En conclusion, les propriétés computed sont une fonctionnalité puissante de Vue.js qui permet de créer des propriétés dérivées réactives et de centraliser la logique de calcul tout en optimisant les performances.