0Pricing
Vue Academy · Leçon

Computed et watch dans l’API Composition

computed() pour l’état dérivé, watch() et watchEffect() pour les effets secondaires.

Computed et watch dans l’API Composition est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. 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 4 leçons au total.

Dériver l’état et réagir à ses changements

L’état réactif n’est qu’une partie du sujet. Vous devez également en dériver de nouvelles valeurs et réagir aux changements. L’API de composition propose computed, watch et watchEffect pour cela.

computed pour les valeurs dérivées

computed() prend une fonction d’accès et renvoie une référence dont la valeur est dérivée d’un autre état réactif. Accédez-y avec .value en JS ; elle est déballée dans le modèle.

import { ref, computed } from 'vue'

const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4

computed est différé et mis en cache

Une valeur computed n’est recalculée que lorsque l’une de ses dépendances réactives change. Si vous la lisez dix fois sans modification, la fonction d’accès ne s’exécute qu’une fois et le résultat mis en cache est réutilisé.

Cela rend computed idéal pour les calculs dérivés coûteux.

computed se met à jour automatiquement

Modifiez une dépendance et computed se met à jour lors de sa prochaine lecture. Vous n’avez jamais besoin de l’appeler manuellement.

const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10

watch pour les effets secondaires

watch() observe une source réactive et exécute une fonction de rappel lorsqu’elle change. La fonction de rappel reçoit la nouvelle valeur et l’ancienne valeur.

import { ref, watch } from 'vue'

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log('changed from', oldVal, 'to', newVal)
})

watch est différé par défaut

Contrairement à computed, watch n’exécute pas immédiatement sa fonction de rappel. Il attend le premier changement. Utilisez-le pour les effets secondaires : journalisation, récupération de données et enregistrement dans le stockage.

Surveiller plusieurs sources

Transmettez un tableau de sources pour surveiller plusieurs valeurs à la fois. La fonction de rappel reçoit des tableaux contenant les nouvelles et les anciennes valeurs.

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(newCount, newName)
})

Surveiller une fonction d’accès

Pour surveiller une propriété d’un objet réactif, transmettez une fonction d’accès. Surveiller directement l’objet ne se déclenche que lors de changements en profondeur, ce qui peut être surprenant.

const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
  console.log('count is', newVal)
})

watchEffect : exécution immédiate et suivi automatique

watchEffect() exécute immédiatement sa fonction et la réexécute chaque fois qu’une valeur réactive utilisée à l’intérieur change. Vous n’énumérez pas les dépendances : elles sont suivies automatiquement.

import { ref, watchEffect } from 'vue'

const count = ref(0)
watchEffect(() => {
  console.log('count is', count.value)
})
// logs immediately, then on every change

watch et watchEffect

  • watch : source explicite, exécution différée, accès aux anciennes et aux nouvelles valeurs.
  • watchEffect : suit automatiquement les dépendances, s’exécute immédiatement, sans accès à l’ancienne valeur.

Utilisez watch lorsque vous avez besoin de la valeur précédente ou d’un contrôle précis. Utilisez watchEffect pour des effets secondaires réactifs rapides.

computed ou watch

Utilisez computed lorsque vous souhaitez obtenir une nouvelle valeur dérivée. Utilisez watch ou watchEffect lorsque vous souhaitez effectuer une action en réaction à une modification. N'utilisez pas watch pour recalculer une valeur : c'est précisément le rôle de computed.

Vérification rapide

Choisissez le bon utilitaire réactif.

Récapitulatif

Vous savez maintenant comment dériver des valeurs et réagir aux changements :

  • computed crée des valeurs dérivées évaluées à la demande et mises en cache.
  • watch réagit à une source précise et fournit les valeurs nouvelle et précédente ; il est évalué à la demande.
  • watchEffect s'exécute immédiatement et suit automatiquement ses dépendances.
  • Utilisez computed pour les valeurs et watch/watchEffect pour les effets secondaires.

Questions Fréquemment Posées

La leçon « Computed et watch dans l’API Composition » est-elle gratuite ?

Oui — le texte complet de « Computed et watch dans l’API Composition » 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 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Computed et watch dans l’API Composition » ?

computed() pour l’état dérivé, watch() et watchEffect() pour les effets secondaires. 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 4 sur 4.

Combien de temps prend la leçon « Computed et watch dans l’API Composition » ?

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

  1. Pourquoi l’API Composition ?
  2. Fonction setup() et variables réactives
  3. ref ou reactive : quand utiliser chacun ?
  4. Computed et watch dans l’API Composition
← Retour à Vue Academy