Un guide simple sur les propriétés calculées de Vue.js

Vue.js fournit une fonctionnalité puissante appelée computed properties ​​qui vous permet d'effectuer des calculs et de dériver des données à partir de l'état de votre composant. Les propriétés calculées sont particulièrement utiles lorsque vous souhaitez effectuer des calculs ou des transformations complexes basés sur des propriétés de données réactives tout en gardant votre code de modèle propre et lisible.

Dans ce guide, nous explorerons les bases des propriétés calculées dans Vue.js, en quoi elles diffèrent des méthodes et comment les utiliser efficacement dans vos composants Vue.

Que sont les propriétés calculées ?

Les propriétés calculées sont des fonctions définies dans l'objet computed d'un composant Vue. Contrairement aux méthodes, les propriétés calculées sont mises en cache en fonction de leurs dépendances. Cela signifie qu'elles ne seront réévaluées que lorsque l'une de leurs dépendances change, ce qui les rend plus efficaces pour les opérations coûteuses.

Voici un exemple basique d'un composant Vue utilisant une propriété calculée:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

Dans cet exemple, la propriété calculée fullName combine les propriétés de données firstName et lastName pour renvoyer un nom complet. Étant donné que fullName est une propriété calculée, elle sera automatiquement mise à jour chaque fois que firstName ou lastName change.

Propriétés calculées et méthodes

À première vue, les propriétés calculées peuvent sembler similaires aux méthodes, car les deux peuvent être utilisées pour effectuer des calculs et renvoyer des résultats. Cependant, il existe une différence essentielle entre les deux:

• Méthodes: Les méthodes sont réévaluées à chaque fois qu'elles sont appelées. Cela signifie qu'elles ne mettent pas en cache les résultats et peuvent être moins efficaces si elles nécessitent des ressources de calcul importantes.
• Propriétés calculées: Les propriétés calculées sont mises en cache en fonction de leurs dépendances et ne sont réévaluées que lorsque ces dépendances changent. Cela les rend plus efficaces pour les scénarios où vous avez des calculs coûteux.

Par exemple, si nous utilisons une méthode au lieu d'une propriété calculée pour le calcul du nom complet, elle sera appelée à chaque fois que le modèle est rendu. Avec une propriété calculée, elle n'est recalculée que lorsque l'une de ses dépendances change.

Utilisation des getters et setters avec des propriétés calculées

Les propriétés calculées peuvent également avoir des getters ​​et des setters. Par défaut, les propriétés calculées n'ont qu'un getter, mais vous pouvez ajouter un setter pour gérer les mises à jour des données.

Voici un exemple d'une propriété calculée avec un getter et un setter:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <input v-model="fullName" placeholder="Enter your full name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
};
</script>

Dans cet exemple, la propriété calculée fullName possède un getter qui renvoie le nom complet et un setter qui divise le nom saisi et met à jour les propriétés de données firstName et lastName.

Réactivité dans les propriétés calculées

Les propriétés calculées sont réactives et se mettent automatiquement à jour lorsque leurs dépendances changent. Par exemple, si vous modifiez la valeur de firstName ou lastName, la propriété calculée fullName se met automatiquement à jour pour refléter la nouvelle valeur.

Voici un exemple démontrant cette réactivité:

<template>
  <div>
    <p>First Name: {{ firstName }}</p>
    <p>Full Name: {{ fullName }}</p>
    <button @click="firstName = 'Jane'">Change First Name to Jane</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

Dans cet exemple, lorsque le bouton est cliqué, firstName est modifié en "Jane" et la propriété calculée fullName est automatiquement mise à jour en "Jane Doe".

Bonnes pratiques pour l'utilisation des propriétés calculées

• Utilisez des propriétés calculées pour des calculs coûteux qui reposent sur des données réactives.
• Gardez les propriétés calculées simples et axées sur le retour des valeurs.
• Évitez les effets secondaires dans les propriétés calculées; utilisez plutôt des méthodes si vous devez effectuer des actions.
• Utilisez des getters et des setters pour les propriétés calculées lorsque vous devez gérer à la fois la lecture et l'écriture de données.
• Assurez-vous que les dépendances des propriétés calculées sont réactives; sinon, elles ne seront pas mises à jour correctement.

Conclusion

Les propriétés calculées sont une fonctionnalité puissante de Vue.js qui vous permet de garder votre code propre, efficace et facile à maintenir. Elles vous aident à dériver des données d'autres propriétés réactives et à les mettre à jour automatiquement lorsque les dépendances changent. En comprenant comment utiliser efficacement les propriétés calculées, vous pouvez créer des applications Vue.js plus robustes et plus performantes.