0Pricing
Vue Academy · Leçon

Observateurs et réactivité profonde

Réagissez aux changements de données avec des observateurs et une observation profonde

Observateurs et réactivité profonde est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 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’un observateur ?

Un observateur exécute une fonction en réaction à une modification des données.

  • Contrairement aux propriétés calculées, il sert aux effets secondaires
  • Récupérer des données, effectuer une journalisation, enregistrer dans le stockage
  • Vous réagissez lorsqu’un élément précis est modifié

La fonction de surveillance

La fonction de surveillance reçoit une source à surveiller et une fonction de rappel qui reçoit les valeurs nouvelles et anciennes.

import { ref, watch } from "vue"

const query = ref("")

watch(query, (newVal, oldVal) => {
  console.log("changed from", oldVal, "to", newVal)
})

Un exemple pratique

Surveiller une entrée de recherche pour déclencher un appel d’API lorsqu’elle est modifiée.

const search = ref("")

watch(search, async (newQuery) => {
  const results = await fetchResults(newQuery)
  items.value = results
})

L’option d’exécution immédiate

Par défaut, un observateur ne se déclenche qu’en cas de modification. L’option d’exécution immédiate l’exécute également une fois dès le départ.

watch(userId, (id) => {
  loadUser(id)
}, { immediate: true })

// Runs immediately with the current value,
// then again on every change

L’option de suivi en profondeur

Par défaut, la surveillance d’un objet ne se déclenche qu’en cas de modification de sa référence. L’option de suivi en profondeur surveille également les propriétés imbriquées.

const profile = reactive({ name: "Ada", address: { city: "London" } })

watch(profile, (val) => {
  console.log("profile changed")
}, { deep: true })

// Fires even when profile.address.city changes

Surveiller des objets imbriqués

Sans suivi en profondeur, la modification d’une propriété imbriquée d’un objet réactif surveillé peut ne pas déclencher la fonction de rappel comme prévu. Le suivi en profondeur garantit ce déclenchement, au prix d’un travail supplémentaire.

  • Utilisez le suivi en profondeur uniquement lorsque vous avez réellement besoin de suivre les propriétés imbriquées
  • Surveiller en profondeur de grands objets peut être coûteux

Surveiller une fonction d’accès

Pour surveiller une valeur imbriquée précise, transmettez une fonction d’accès comme source.

watch(
  () => profile.address.city,
  (newCity) => {
    console.log("city is now", newCity)
  }
)

Surveiller plusieurs sources

Transmettez un tableau de sources pour surveiller plusieurs valeurs à la fois.

watch([width, height], ([newW, newH], [oldW, oldH]) => {
  console.log("size:", newW, "x", newH)
})

watchEffect

watchEffect s’exécute immédiatement et se réexécute chaque fois qu’une valeur réactive qu’il lit est modifiée. Aucune liste explicite de sources n’est nécessaire.

import { watchEffect } from "vue"

watchEffect(() => {
  console.log("count is", count.value)
})

// Runs now, and again whenever count changes

Surveillance ou watchEffect

Pour choisir entre les deux :

  • surveillance : source explicite, fournit les valeurs anciennes et nouvelles, différée par défaut
  • watchEffect : suit automatiquement les dépendances, s’exécute immédiatement, ne fournit pas l’ancienne valeur

Utilisez la surveillance lorsque vous avez besoin de la valeur précédente ou d’un contrôle précis ; utilisez watchEffect pour plus de simplicité.

Les observateurs dans l’API des options

L’API des options déclare les observateurs dans un bloc de surveillance, indexé par le nom des données.

export default {
  data() {
    return { question: "" }
  },
  watch: {
    question(newVal, oldVal) {
      this.getAnswer(newVal)
    }
  }
}

Vérification rapide

Vérifiez votre compréhension des observateurs.

Récapitulatif : observateurs et réactivité en profondeur

Vous avez appris à réagir aux modifications avec des effets secondaires :

  • surveillance observe une source et fournit les valeurs nouvelles et anciennes
  • immédiate l’exécute une fois au démarrage
  • en profondeur suit les modifications des objets imbriqués
  • watchEffect suit automatiquement les dépendances et s’exécute immédiatement
  • Surveillez plusieurs sources avec un tableau

Ensuite : le routage avec Vue Router.

Questions Fréquemment Posées

La leçon « Observateurs et réactivité profonde » est-elle gratuite ?

Oui — le texte complet de « Observateurs et réactivité profonde » 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 « Observateurs et réactivité profonde » ?

Réagissez aux changements de données avec des observateurs et une observation profonde 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 3 sur 3.

Combien de temps prend la leçon « Observateurs et réactivité profonde » ?

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. Fondamentaux de la réactivité
  2. Propriétés calculées
  3. Observateurs et réactivité profonde
← Retour à Vue Academy