Vue Academy · Leçon

Propriétés calculées

Dérivez des valeurs réactives mises en cache avec des propriétés calculées

Propriétés calculées est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 3 leçons au total.

Qu’est-ce qu’une propriété calculée ?

Une propriété computed dérive d’autres données réactives.

Elle est recalculée uniquement lorsque ses dépendances changent
Elle se lit comme une propriété normale dans les modèles
Elle permet de garder les modèles clairs en déplaçant la logique dans JS

Définir une propriété computed

Dans l’API de composition, utilisez la fonction computed.

import { ref, computed } from "vue"

const firstName = ref("Ada")
const lastName = ref("Lovelace")

const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})

Utiliser computed dans le modèle

Une propriété computed s’utilise comme une propriété de data, sans parenthèses.

<template>
  <p>{{ fullName }}</p>
</template>

<!-- fullName updates automatically when
     firstName or lastName change -->

computed ou méthodes

Une méthode renvoie également une valeur : pourquoi utiliser computed ?

computed est mise en cache en fonction de ses dépendances
Une méthode s’exécute à chaque fois qu’elle est appelée lors d’un rendu

computed est plus efficace pour les valeurs dérivées utilisées à plusieurs reprises.

La mise en cache en pratique

Une propriété computed ne s’exécute à nouveau que lorsqu’une dépendance change. Si vous la lisez plusieurs fois, le résultat mis en cache est réutilisé.

const expensive = computed(() => {
  console.log("computing...")
  return heavyCalculation(data.value)
})

// Reading expensive twice in one render
// logs "computing..." only once

Les méthodes s’exécutent à chaque fois

En revanche, une méthode recalcule sa valeur à chaque appel, même si les entrées n’ont pas changé.

// In template: {{ getTotal() }} {{ getTotal() }}
// Calls getTotal twice, recomputing both times

methods: {
  getTotal() {
    return this.price * this.qty
  }
}

computed dans l’API des options

L’API des options déclare les propriétés computed dans un bloc computed.

export default {
  data() {
    return { price: 10, qty: 3 }
  },
  computed: {
    total() {
      return this.price * this.qty
    }
  }
}

Accesseurs computed

Par défaut, une propriété computed est en lecture seule : elle possède uniquement un accesseur de lecture.

L’accesseur s’exécute pour produire la valeur chaque fois que les dépendances changent.

const doubled = computed(() => count.value * 2)

// You can read doubled.value
// but assigning to it would warn

Accesseurs d’écriture computed

Vous pouvez rendre une propriété computed modifiable en fournissant à la fois une fonction get et une fonction set.

const fullName = computed({
  get() {
    return first.value + " " + last.value
  },
  set(newValue) {
    const parts = newValue.split(" ")
    first.value = parts[0]
    last.value = parts[1]
  }
})

Utiliser l’accesseur d’écriture

Lorsque vous affectez une valeur à une propriété computed modifiable, son accesseur d’écriture s’exécute.

fullName.value = "Grace Hopper"

// The setter splits and assigns:
// first.value -> "Grace"
// last.value  -> "Hopper"

Quand utiliser computed

Utilisez computed lorsque vous avez besoin d’une valeur dérivée d’un état réactif.

Filtrer ou trier une liste
Formater des données pour l’affichage
Combiner plusieurs valeurs en une seule

Utilisez des observateurs (dans la prochaine leçon) lorsque vous devez réagir avec des effets secondaires.

Vérification rapide

Vérifiez votre compréhension des propriétés computed.

Récapitulatif : propriétés computed

Vous avez appris ce qu’est un état dérivé :

computed dérive des valeurs à partir de données réactives
La valeur est mise en cache et recalculée uniquement lorsque les dépendances changent
Les méthodes s’exécutent à chaque appel, contrairement à computed
Une propriété computed peut avoir un accesseur de lecture et un accesseur d’écriture facultatif

Ensuite : observateurs et réactivité profonde.

Questions Fréquemment Posées

La leçon « Propriétés calculées » est-elle gratuite ?

Oui — le texte complet de « Propriétés calculées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Propriétés calculées » ?

Dérivez des valeurs réactives mises en cache avec des propriétés calculées Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 3.

Combien de temps prend la leçon « Propriétés calculées » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Vue Academy