Les propriétés calculées

Introduction

Dans Vue, chaque fois qu'une donnée réactive est modifiée dans le bloc <script>, le composant est rendu à nouveau afin de mettre à jour automatiquement le contenu affiché dans le bloc <template>. C'est ce qu'on appelle la réactivité, c'est-à-dire que l'interface reste toujours synchronisée avec les données.

Lors de chaque nouveau rendu, Vue réévalue toutes les expressions présentes dans le <template>. Ainsi, toutes les fonctions appelées dans le template sont exécutées à chaque rendu, même si les données réactives modifiées ne sont pas directement utilisées par celles-ci.

Ce comportement garantit la cohérence de l'affichage, mais il peut aussi entraîner des problèmes de performance lorsque certaines fonctions sont coûteuses ou appelées à plusieurs reprises dans le template.

Pour optimiser le rendu, dès qu'une valeur affichée dans le <template> provient d'une fonction qui calcule une donnée à partir d'états réactifs, il faut utiliser une propriété calculée. Son résultat est mis en cache et réévalué uniquement lorsque les données réactives dont elle dépend changent.

En revanche, lorsqu'une expression simple est directement écrite dans les moustaches (par exemple {{ total + 1 }} ou {{ prenom + ' ' + nom }}), il n'est pas nécessaire d'utiliser une propriété calculée, tant que l'expression reste triviale et n'est pas répétée à plusieurs endroits. Vue sait gérer ces expressions sans recalcul coûteux.
Cependant, par cohérence et pour faciliter l'évolution du code, de nombreux développeurs choisissent malgré tout d'utiliser computed() dès qu'une valeur dérive de données réactives, même lorsque le calcul est simple. Cela permet de garder une structure de code claire et homogène, surtout dans les projets appelés à évoluer.

Fonctionnement

Lorsqu'une fonction est appelée directement dans le <template>, Vue l'exécute à chaque nouveau rendu du composant, même si les données réactives modifiées ne sont pas utilisées par cette fonction. Ce comportement garantit la cohérence de l'affichage, mais il peut aussi provoquer des recalculs inutiles.

Une propriété calculée permet d'éviter ces recalculs en dérivant une valeur à partir d'autres données réactives (ref(), reactive(), etc.). Vue met le résultat en cache et ne le réévalue que lorsque l'une des dépendances réactives change.

Pour créer une propriété calculée, on place le bloc d'instructions de la fonction dans computed(), sous la forme d'une fonction fléchée. Vue évalue cette fonction une première fois, puis uniquement lorsque ses dépendances réactives changent.

La valeur retournée par computed() devient elle-même une donnée réactive. On peut donc l'afficher directement dans le template, comme n'importe quelle variable issue de ref(). Le résultat est automatiquement mis en cache et mis à jour uniquement lorsque la donnée d'origine change.

Exemple

Sans propriété calculée

Sans propriété calculée, la fonction obtenirMessageEnMajuscules() est exécutée à chaque fois que la donnée réactive compteur est mise à jour (en l'occurrence, lorsque l'utilisateur clique sur le bouton d'incrémentation), alors qu'elle ne dépend pas de cette donnée.

                <script setup>
                import { ref } from 'vue';

                const message = ref('Message de test');
                const compteur = ref(0);

                const obtenirMessageEnMajuscules = () => 
                {
                    console.log('obtenirMessageEnMajuscules exécutée');
                    return message.value.toUpperCase();
                };

                const incrementer = () => 
                {
                    compteur.value++;
                };
                </script>

                <template>
                    <p>Message : {{ obtenirMessageEnMajuscules() }}</p>
                    <p>Compteur : {{ compteur }}</p>
                    <button type="button" @click="incrementer">Incrémenter</button>
                </template>
            

Ouvrez la console du navigateur et cliquez plusieurs fois sur le bouton d'incrémentation. Vous verrez que la fonction obtenirMessageEnMajuscules() s'exécute à chaque rendu, même si message n'a pas changé.

Cet exemple est volontairement simple. Ici, l'impact est négligeable. Mais dans des composants plus complexes (listes triées, filtres, calculs de moyenne, etc.), réévaluer une fonction à chaque rendu peut ralentir l'application ou provoquer des effets de bord. Il est donc préférable de déplacer la logique dérivée dans le <script> à l'aide d'une propriété calculée.

Avec propriété calculée

On fait passer le bloc d'instructions de la fonction obtenirMessageEnMajuscules() en argument à computed() sous la forme d'une fonction fléchée. La fonction associée est évaluée une première fois, puis seulement lorsque ses dépendances changent.

Vue enregistre automatiquement le résultat d'une propriété calculée et le réutilise lors des prochains rendus. Ce comportement s'appelle la mise en cache. La fonction n'est réévaluée que si une donnée réactive dont elle dépend change, ce qui évite d'exécuter inutilement le calcul à chaque rendu.

Exemple avec mise en cache

                <script setup>
                // On n'oublie pas d'importer la fonction 'computed' !!!
                import { ref, computed } from 'vue';

                const message = ref('Message de test');
                const compteur = ref(0);

                const messageEnMajuscules = computed(() => 
                {
                    console.log('computed évalué');
                    return message.value.toUpperCase();
                });

                const incrementer = () => 
                { 
                    compteur.value++; 
                };
                </script>

                <template>
                    <p>Message : {{ messageEnMajuscules }}</p>
                    <p>Compteur : {{ compteur }}</p>
                    <button type="button" @click="incrementer">Incrémenter</button>
                </template>
            

Dans cette version, la console affiche "computed évalué" uniquement lorsque message est modifié. Les clics sur le bouton d'incrémentation n'entraînent plus de recalcul de messageEnMajuscules tant que message ne change pas. La mise en cache évite ainsi les exécutions inutiles.

Rappel

Tout comme les autres expressions évaluées dans le <template>, une propriété calculée doit rester pure, c'est-à-dire qu'elle se limite à lire des valeurs et retourne un résultat calculé à partir de ces valeurs, sans modifier quoi que ce soit en dehors de son propre bloc d'instructions. Elle doit donc toujours produire le même résultat pour les mêmes entrées, quel que soit le moment où elle est exécutée.

Si une propriété calculée modifie une donnée réactive, elle provoque une mise à jour du composant, ce qui déclenche sa propre réévaluation, puis un nouveau rendu, et ainsi de suite. On obtient alors une boucle de rendu infinie.

Cas d'usage typiques

Éviter les recalculs inutiles

Même si une opération est simple, comme le calcul d'une moyenne, il est préférable de la placer dans une propriété calculée lorsque le résultat dépend de données réactives susceptibles de changer. Cela permet d'éviter de répéter le calcul à chaque rendu du composant.

                <script setup>
                import { ref, computed } from 'vue';

                // Données réactives : tableau de notes
                const notes = ref([12, 15, 18, 10, 14]);

                // Propriété calculée dérivée : moyenne des notes
                // computed() rend ce calcul réactif et met le résultat en cache.
                // Le calcul est relancé uniquement si le contenu du tableau 'notes' change.
                const moyenne = computed(() => 
                {
                    const total = notes.value.reduce((a, b) => a + b, 0);
                    const moyenne = total / notes.value.length;

                    // La méthode "toFixed(n)" arrondit la moyenne à n décimales et retourne une chaîne de caractères. 
                    // "Number()" permet de convertir le résultat en nombre.
                    return Number(moyenne.toFixed(2));
                });

                // Ajoute une note aléatoire (valeur entre 8 et 20).
                const ajouterNoteAleatoire = () => 
                {
                    const nouvelleNote = Math.floor(Math.random() * 13) + 8;
                    notes.value.push(nouvelleNote);
                };
                </script>

                <template>
                    <h4>Notes : {{ notes.join(', ') }}</h4>
                    <p>Moyenne : {{ moyenne }}</p>
                    <button @click="ajouterNoteAleatoire">Ajouter une note aléatoire</button>
                </template>
            

Ici, la propriété calculée moyenne dépend directement de la donnée réactive notes. Vue met automatiquement le résultat en cache et ne relance le calcul que lorsque le tableau est modifié, par exemple lorsqu'on ajoute une nouvelle note. Ce mécanisme évite les recalculs inutiles à chaque rendu tout en gardant l'interface parfaitement synchronisée avec les données.

Même si le calcul est simple, l'utiliser dans une computed() reste une bonne pratique dès qu'il dépend de données réactives, afin d'améliorer la clarté et les performances du composant.

Centraliser une règle d'affichage commune

Une propriété calculée peut aussi servir à centraliser une logique utilisée à plusieurs endroits du template. Cela permet d'assurer une cohérence d'affichage et d'éviter les divergences lorsque la même règle doit être appliquée plusieurs fois. En regroupant le calcul dans un seul endroit, le code devient plus clair, plus fiable et plus simple à maintenir.

                <script setup>
                import { ref, computed } from 'vue';

                // Donnée réactive représentant le stock d'un produit.
                const stock = ref(3);

                // Propriété calculée : détermine le message à afficher selon le stock disponible.
                const statut = computed(() => 
                {
                    if (stock.value <= 0) return 'Rupture';
                    if (stock.value <= 2) return 'Bientôt épuisé';
                    return 'En stock';
                });

                // Fonction qui simule la vente d'un article.
                const vendreUn = () =>
                {
                    if (stock.value > 0) stock.value -= 1;
                };
                </script>

                <template>
                    <button @click="vendreUn">Vendre 1</button>

                    <p>Stock : {{ stock }}</p>
                    <p>Badge : {{ statut }}</p>
                    <p>Info produit : Statut {{ statut }} ( reste {{ stock }} )</p>
                </template>
            

Dans cet exemple, la logique conditionnelle qui définit le statut du produit est centralisée dans une seule propriété calculée. Le même résultat est réutilisé dans plusieurs zones du template (badge, description, message informatif), sans risque d'incohérence. Si les règles de seuil changent plus tard (par exemple : "bientôt épuisé" à partir de 5), il suffira de modifier une seule ligne dans le calcul, et tous les affichages resteront automatiquement synchronisés.

Isoler des transformations sans modifier la source

On dérive souvent de nouvelles données à partir d'une source existante, par exemple en filtrant ou en triant une liste. Placer cette logique dans une propriété calculée permet de préserver la donnée originale et d'éviter les effets de bord, c'est-à-dire les modifications involontaires d'un état partagé. Cette approche rend le code plus lisible, plus prévisible et plus sûr.

Dans l'exemple ci-dessous, on prépare une liste de produits affichée selon deux critères réactifs, le texte de recherche et une option de tri alphabétique. Deux propriétés calculées sont utilisées pour isoler ces étapes, la première filtre la liste et la seconde la trie.

                <script setup>
                import { ref, computed } from 'vue';

                const recherche = ref('');
                const trierParOrdreAlpha = ref(false);

                const produits = ref([
                    { id: 1, nom: 'Casque Sony', prix: 79 },
                    { id: 2, nom: 'Clavier Corsair', prix: 149 },
                    { id: 3, nom: 'Casque Bose', prix: 199 },
                    { id: 4, nom: 'Souris Logitech', prix: 59 }
                ]);

                // Première propriété calculée : filtre les produits selon la recherche.
                const produitsFiltres = computed(() => 
                {
                    // On nettoie la recherche :
                    // - trim() retire les espaces avant et après ;
                    // - toLowerCase() : convertit la recherche en minuscules pour normaliser la comparaison à venir.
                    const rechercheNettoyee = recherche.value.trim().toLowerCase();

                    // Si le champ est vide, on retourne directement la liste complète.
                    if (!rechercheNettoyee) 
                    {
                        return produits.value;
                    }

                    // On retourne un nouveau tableau contenant uniquement les produits dont
                    // le nom inclut le texte saisi (comparé en minuscules).
                    // filter() ne modifie pas le tableau d'origine.
                    return produits.value.filter(p => 
                        p.nom.toLowerCase().includes(rechercheNettoyee)
                    );
                });

                // Deuxième propriété calculée : trie la liste filtrée si nécessaire.
                const produitsAffiches = computed(() => 
                {
                    // On part de la version filtrée.
                    const base = produitsFiltres.value;

                    if (trierParOrdreAlpha.value) 
                    {
                        // toSorted() crée un tableau trié sans modifier l'original.
                        // localeCompare() compare deux chaînes selon l'ordre alphabétique
                        // réel de la langue, en tenant compte notamment des accents.
                        return base.toSorted((a, b) => a.nom.localeCompare(b.nom));
                    }

                    // Sinon, on garde l'ordre d'origine.
                    return base;
                });
                </script>

                <template>
                    <div>
                        <!-- Liaison bidirectionnelle (v-model) avec le champ de recherche -->
                        <input 
                            type="text" 
                            v-model="recherche" 
                            placeholder="Rechercher un produit…" 
                        />

                        <!-- Case à cocher pour activer le tri alphabétique -->
                        <label for="trierParOrdreAlpha">
                            Trier A->Z
                        </label>
                        <input 
                            id="trierParOrdreAlpha" 
                            type="checkbox" 
                            v-model="trierParOrdreAlpha" 
                        />
                    </div>

                    <!-- Liste finale, filtrée et triée -->
                    <ul>
                        <li v-for="p in produitsAffiches" :key="p.id">
                            {{ p.nom }} — {{ p.prix }} €
                        </li>
                    </ul>
                </template>
            

Cet exemple illustre l'intérêt de créer des données dérivées intermédiaires à l'aide de propriétés calculées. La liste d'origine produits reste intacte, tandis que produitsFiltres et produitsAffiches représentent des versions transformées, sans jamais altérer la source.

La méthode toSorted() est utilisée à la place de sort() car elle crée une copie triée du tableau au lieu de le modifier en place.

Cette comparaison simple (a.nom > b.nom ? 1 : -1) ne tient pas compte des accents. Pour trier correctement des chaînes comme "ecran" et "écran", utilisez plutôt localeCompare(). Cette méthode gère également la casse, ce qui rend inutile l'appel à toLowerCase() pour normaliser la comparaison. Vous pouvez consulter sa documentation sur le site de MDN pour en savoir plus.

Cette approche rend le code plus prévisible, plus maintenable et surtout plus sûr. Chaque transformation est clairement isolée, et la donnée de base reste inchangée.

Propriétés calculées inscriptibles

                    <script setup>
                    import { ref, computed } from 'vue';

                    // Stockage interne en centimes (entier).
                    const prixCts = ref(1299);

                    const prixAffiche = computed({
                        get() 
                        {
                            // Getter : conversion du montant (centimes en euros, arrondi à 2 décimales).

                            return (prixCts.value / 100).toFixed(2).replace('.', ',');
                        },
                        set(value) 
                        {
                            // Setter : conversion du montant (chaîne en nombre et euros en centimes).

                            // Remplacer la virgule (,) par un point (.) 
                            // puis convertir la valeur obtenue en nombre à l'aide de Number().
                            // Notez qu'il n'est pas nécessaire d'utiliser "trim" lors de ce type de conversion.
                            const n = Number(value.replace(',', '.'));

                            // Éviter d'actualiser "prixCts.value" si le résultat (n) n'est pas un nombre.
                            // Number.isFinite(n) retourne "true" si "n" est un nombre réel 
                            // et "false" dans tous les autres cas.
                            if (!Number.isFinite(n)) 
                            {
                                return;
                            }

                            // Met à jour "prixCts.value" après conversion du montant en centimes.

                            // En JavaScript, certaines opérations sur les nombres décimaux peuvent produire
                            // de légères erreurs d'arrondi à cause de la représentation binaire des nombres.
                            // Par exemple : 1.005 * 100 donne 100.49999999999999, qui serait arrondi à 100 au lieu de 101.
                            //
                            // L'ajout de "Number.EPSILON" (la plus petite différence représentable entre deux nombres)
                            // compense ces micro-erreurs en décalant légèrement la valeur avant l'arrondi,
                            // ce qui garantit un résultat correct même dans les cas limites.
                            prixCts.value = Math.round((n + Number.EPSILON) * 100);
                        }
                    });
                    </script>

                    <template>
                        <label>Prix (EUR)</label>

                        <!-- 
                            Le modificateur "lazy" est important : 
                            il indique à Vue de ne mettre à jour la donnée liée ("prixAffiche")
                            qu'au moment où l'utilisateur a terminé sa saisie 
                            (par exemple quand il quitte le champ ou appuie sur Entrée),
                            et non à chaque frappe. 
                            Cela évite que la valeur soit reformatée à chaque frappe,
                            ce qui pourrait déplacer le curseur ou perturber la saisie de l'utilisateur.

                            L'attribut HTML "inputmode" indique au navigateur quel type 
                            de clavier virtuel afficher (ex. décimal, numérique, e-mail, etc.).
                            Il est surtout utile sur les appareils à écran tactile.
                        -->
                        <input v-model.lazy="prixAffiche" inputmode="decimal" />

                        <p>Stockage interne : {{ prixCts }} centimes</p>
                        <p>Version pour l'affichage : {{ prixAffiche }} €</p>
                    </template>
                

Exercices

Exo-computed-01 : Compteurs dérivés

• Objectif : Remplacer les calculs manuels du nombre de tâches par des propriétés calculées réutilisables.
• Instructions :
  1. Ouvrez votre composant App.vue contenant la todoliste réalisée lors de l'exercice de synthèse.
  2. Ajoutez une propriété calculée nommée nombreTotalTaches. Elle doit renvoyer le nombre total d'éléments du tableau réactif taches. Une propriété calculée doit toujours retourner une valeur, n'oubliez donc pas le return.
  3. Ajoutez une propriété calculée nommée nombreTachesTerminees. Elle doit renvoyer le nombre de tâches dont la propriété terminee vaut true, en se basant sur les données déjà présentes dans taches.
  4. Dans la partie <template>, remplacez toutes les expressions qui calculaient directement ces valeurs (calcul dans les moustaches {{ }} ou appel de fonction depuis le template) par l'utilisation des propriétés calculées nombreTotalTaches et nombreTachesTerminees. Le texte affiché dans l'interface reste identique, seule la manière de le calculer change.

Exo-computed-02 : États dérivés pour l'interface

• Objectif Remplacer certaines conditions et textes calculés directement dans le template par des propriétés calculées plus lisibles et plus faciles à réutiliser.
• Instructions
  1. Créez une propriété calculée nommée aDesTaches. Elle doit retourner true si le tableau taches contient au moins un élément, et false s'il est vide. N'oubliez pas qu'une computed doit toujours retourner une valeur.
  2. Adaptez ensuite le rendu conditionnel de votre template afin de ne plus tester directement la longueur de taches.
     • Affichez la liste uniquement si aDesTaches vaut true.
     • Affichez le message "Aucune tâche à afficher" lorsque aDesTaches vaut false.
     Le comportement visuel reste identique, seule la logique conditionnelle est déplacée.
  3. Créez une propriété calculée nommée peutUtiliserTriManuel. Elle doit retourner true lorsque triCritere vaut "manuel", et false pour tous les autres choix.
  4. Dans le template, remplacez toutes les conditions utilisées pour désactiver les boutons ⬆ et ⬇ par l'utilisation de la propriété calculée peutUtiliserTriManuel. Les flèches continuent de fonctionner uniquement lorsque le tri manuel est sélectionné, et restent désactivées dans tous les autres cas.

Exo-computed-03 : Liste triée via propriété calculée

• Objectif : Déplacer toute la logique de tri de la todoliste dans une propriété calculée, afin que l'interface se mette automatiquement à jour lorsque les données ou le critère de tri changent.
• Instructions :
  1. Dans votre composant App.vue, créez une propriété calculée nommée tachesTriees. Elle doit renvoyer une version triée du tableau taches en fonction de la valeur actuelle de triCritere.
  2. Reprenez la logique écrite dans votre fonction appliquerTri() et déplacez-la dans cette propriété calculée. Adaptez cette logique pour qu'elle renvoie toujours un tableau trié en veillant à terminer le bloc de la propriété calculée par un return.
  3. Une propriété calculée ne doit jamais modifier une donnée réactive comme taches. Comme sort() modifie le tableau sur lequel elle s'applique, travaillez uniquement sur une copie. Pour cela, utilisez toSorted(), qui produit une version triée sans altérer le tableau d'origine. Choisissez le comparateur adapté en fonction de la valeur de triCritere et retournez le tableau produit par toSorted().
  4. Dans votre <template>, remplacez le v-for qui parcourt actuellement taches par un v-for basé sur tachesTriees. L'affichage de la liste doit rester identique, seule la source des données change.
  5. Adaptez ensuite les fonctions monter(id) et descendre(id). Le déplacement doit maintenant se baser sur la position visuelle de la tâche dans tachesTriees, qui reflète l'ordre affiché à l'écran. Commencez par retrouver, dans tachesTriees, la position de la tâche à déplacer, puis identifiez la tâche située juste au-dessus ou juste en dessous. Échangez ensuite leurs valeurs ordre dans les données sources, c'est à dire sur les objets présents dans taches. tachesTriees reste une vue triée à partir de taches et ne doit jamais être modifiée directement.
  6. Maintenant que la propriété calculée tachesTriees utilise la donnée réactive triCritere, et que triCritere est reliée au formulaire de tri via v-model, le tri doit se mettre à jour automatiquement. Vous pouvez retirer le bouton Appliquer du template, ainsi que tous les appels à appliquerTri() dans le script et dans le template (par exemple un événement @change="appliquerTri" sur le formulaire de tri).