La réactivité : ref, computed, watch

Le modèle mental : un graphe de dépendances vivant

En backend, quand une donnée change, TU écris le code qui propage. En Vue, tu déclares des sources réactives et des dérivations — le framework traque qui lit quoi et re-exécute le strict nécessaire :

const quantite = ref(2)                       // source réactive
const prixUnitaire = ref(10)
const total = computed(() => quantite.value * prixUnitaire.value)  // dérivation

quantite.value = 5      // → total se recalcule TOUT SEUL → le DOM qui l'affiche aussi

Comment ? ref() enveloppe la valeur dans un objet dont .value est instrumenté (getter/setter via Proxy) : lire .value pendant un computed/rendu enregistre une dépendance ; écrire .value notifie les dépendants. C'est tout le secret — un pub/sub automatique au niveau des propriétés.

Les trois outils et leurs rôles

• ref(valeur) : la source. Pour les objets, reactive() existe mais la règle simple du projet : ref partout, uniformité gagnante ;
• computed(fn) : la dérivation pure — jamais d'effet de bord dedans, mise en cache tant que ses dépendances n'ont pas bougé (gratuit à relire) ;
• watch(source, fn) : l'effet — quand telle source change, fais quelque chose (appel API, navigation…). Le signe distinctif : watch fait de l'I/O, computed jamais.

L'erreur classique du backendeur : faire avec watch ce qui devrait être un computed (« quand X change, recalcule Y et stocke-le ») — si c'est une pure fonction des sources, c'est un computed. Watch = réagir ; computed = dériver.