0Pricing
Frontend Academy · Leçon

computed() et watch()

Dérivez des valeurs à la demande avec computed(), réagissez aux changements d’état avec watch() et watchEffect(), puis contrôlez le moment de vidage.

computed() et watch() est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

computed() dans l’API Composition

computed(fn) crée une ref réactive en lecture seule dont la valeur est dérivée d’autres sources réactives. Elle est mise en cache : l’accesseur ne s’exécute que lorsque ses dépendances changent.

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

const items = ref([{ price: 10 }, { price: 20 }, { price: 30 }]);
const tax = ref(0.1);

const subtotal = computed(() => items.value.reduce((s, i) => s + i.price, 0));
const total = computed(() => subtotal.value * (1 + tax.value));
</script>

computed() modifiable

Transmettez un objet avec get et set pour créer une computed modifiable. L’accesseur set gère les mises à jour, généralement en répercutant la modification sur la ref source.

const firstName = ref('Alice');
const lastName  = ref('Smith');

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (val: string) => {
    [firstName.value, lastName.value] = val.split(' ');
  }
});

fullName.value = 'Bob Jones'; // sets both refs

Principes de base de watch()

watch(source, callback) exécute la fonction de rappel lorsque la source change. La fonction de rappel reçoit les valeurs nouvelle et ancienne.

import { ref, watch } from 'vue';

const query = ref('');

watch(query, (newVal, oldVal) => {
  console.log(`Changed from '${oldVal}' to '${newVal}'`);
  searchAPI(newVal);
});

Observer une ref ou une propriété reactive

Observez directement une ref. Pour observer une propriété réactive, utilisez une fonction d’accès () => state.prop.

const count = ref(0);
watch(count, val => console.log('count:', val));

const state = reactive({ count: 0, name: '' });
watch(() => state.count, val => console.log('state.count:', val));

Observation profonde

Transmettez { deep: true } pour observer les changements imbriqués dans une ref d’objet.

const user = ref({ name: 'Alice', address: { city: 'NY' } });

watch(user, (newUser) => {
  console.log('user changed:', newUser);
}, { deep: true });

Observation immédiate

Transmettez { immediate: true } pour exécuter immédiatement la fonction de rappel lors de la mise en place, avant toute modification. C’est utile lorsque vous souhaitez exécuter un effet secondaire avec la valeur initiale.

watch(userId, async (id) => {
  user.value = await fetchUser(id);
}, { immediate: true }); // runs once on setup, then on change

watchEffect()

watchEffect(fn) exécute immédiatement la fonction de rappel, puis la relance chaque fois qu’une dépendance réactive utilisée à l’intérieur change. Il n’est pas nécessaire de spécifier explicitement les sources.

import { watchEffect } from 'vue';

watchEffect(() => {
  // runs immediately and whenever query or page changes:
  fetchResults(query.value, page.value);
});

watchEffect ou watch

watchEffect : immédiat, suit automatiquement les dépendances et ne donne pas accès à l’ancienne valeur. watch : sources explicites, différé par défaut, accès aux valeurs ancienne et nouvelle. Utilisez watchEffect pour les effets secondaires déclaratifs ; utilisez watch lorsque vous devez contrôler le moment ou la fréquence d’exécution.

Arrêter les observateurs

watch et watchEffect renvoient tous deux une fonction d’arrêt. Appelez-la pour arrêter l’observation. Dans