Comment le Système de Réactivité de Vue Fonctionne-t-il Vraiment ?

Le système de réactivité de Vue est LA MAJEURE et prodigieuse magie noire qui fait que toute votre immense UI HTML se met à jour instantanément et automatiquement dès que la moindre data change. Comprendre finement comment cette machinerie tourne sous le capot va sublimer votre capacité à écrire un code performant et déboguer des bugs coriaces impossibles à comprendre sinon !

Le Concept Industriel Fondamental : La Réactivité Basée sur des Objets “Proxy” ES6

Depuis Vue 3, le moteur utilise les féroces Objets ES6 JS standard nommés Proxy pour intercepter physiquement tous les accès aux propriétés et en espionner toutes les mutations mortelles en direct.

Voici une vision très simplifiée du super moteur caché en interne de Vue :

// Implémentation ES6 de base (ultra-simplifiée) de `reactive()` dans le framework Vue 3
function reactive(obj) {
    return new Proxy(obj, {
        // LE PIÈGE A LECTURE MENTALE :
        get(target, key) {
            track(target, key); // Étape Magique 1 : 👁️ ENREGISTRER L'ESPIONNAGE de cette dépendance par quelqu'un !
            return target[key];
        },

        // LE PIÈGE D’ÉCRITURE PHYSIQUE :
        set(target, key, value) {
            target[key] = value;
            trigger(target, key); // Étape Magique 2: 🚨 DÉCLENCHER LA GRANDE ALARME ! (Notifier tous les abonnés inscrits à cette dépendance précise !)
            return true;
        },
    });
}

La magie est là :

Quand un de vos morceaux de HTML, ou un computed “lit” / “accède” innocemment à une propriété… Vue l’Enregistre (“Tracks”) immédiatement d’office comme étant son esclave docile dépendant.
Quand un plus tard, une action quelconque vient Modifier/Muter méchamment cette propriété… Vue va déclencher (Trigger) une immense vague d’updates pour envoyer balader l’info sur tout son arbre esclave d’abonnés !

Le Suivi des Dépendances (“Dependency Tracking”)

Vue garde intelligemment pour lui un grand registre mental des composants précis et qui des fameuses computed complexes dépendent intimement de quelles minuscules datas réactives partielles :

┌─────────────────────────────────────────────┐
│              Etat Réactif Base              │
│         const count = ref(0)                │
└─────────────────────────────────────────────┘
                     │  (Mise à jour)
         ┌───────────┼───────────┐
         │           │           │
         ▼           ▼           ▼
    ┌─────────┐ ┌─────────┐ ┌─────────┐
    │Template │ │Computed │ │ Watcher │
    │Visuel UI│ │Magique  │ │ Fonction│
    └─────────┘ └─────────┘ └─────────┘

    Quand `count.value` change brutalement, SEULS CES 3 GROS ABONNÉS PRÉCIS seront mis à jour en Force !

`ref()` Sous le Capot Technique Moteur

ref() ne fait en fait que bêtement emballer sauvagement une misérable valeur Javascript morte primitive (0, "Salut", true) dans un immense Object Formel qui possède en son sein naturel une fausse fameuse “propriété .value”, afin de pouvoir devenir lui-même magiquement un faux Proxy sur ce simple sous paramètre de sa structure object globale inventée :

// L'Implémentation archi-simplifié moteur de vue de ce cher `ref()`
function ref(value) {
    const refObject = {
        get value() {
            // LE GETTER JS MAGIQUE NOUVELLE GENERATION POUR OBJETS CLASS :
            track(refObject, 'value'); // Je traque violemment quand c'est lu !
            return value;
        },

        set value(newValue) {
            // LE SETTER OVERRIDE ! :
            value = newValue;
            trigger(refObject, 'value'); // Je Tire l'alarme dés qu'on ose écrire par-dessus ma fausse belle "valeur" d'entrée !
        },
    };

    return refObject; // Le monstre final créé
}

C’EST UNIQUE ÇA LA SEULE ET TRISTE RAISON POUR LAQUELLE VOUS DEVEZ IMPÉRATIVEMENT TAPER LE MOT “.VALUE” À CHAQUE FOIS EN SCRIPT JS !!! C’est simplement l’appât du piège virtuel objet de Vue ! Il doit absolument avoir une vraie sous clé JS Objet pour pouvoir l’intercepter via getter/setter.

`reactive()` Sous le Capot Technique Moteur

A contrario pour faire plus propre avec nos grands Objets JS qui ont DEJA des milliers de clés en eux, reactive() va lui simplement renvoyer un véritable ES6 “Proxy JavaScript” pur qui se branchera et interceptera violemment l’ABSOLUE TOTALITÉ des dizaines ou centaines accès à toutes les petites clés properties intérieures nées de l’objet à un moment T de sa vie ! :

const state = reactive({ count: 0, name: 'Vue' });

// Absolument CHAQUE micro accès lecture ou écriture propriété déclenche le track() pur d'alarme !!
console.log(state.count); // L'alarme track() silencieuse de Vue est déclenchée  !
console.log(state.name); // Idem  !

// Et chaque micro mutation déclenche de suite en cascade des milliers d'updates triggers
state.count++; // l'alarme trigger() de Vue est déclenchée en mode MAJ Graphique Ultime !
state.name = 'Vue 3'; // Idem !

Mais… Pourquoi les Templates HTML `<template>` N’ont Pas Besoin de `.value` alors ?!?!?

L’Incroyable petit Compilateur natif interne de Vue est un génie : Il injecte pour vous secrètement et O-TO-MA-TI-QUE-MENT ce hideux suffixe .value partout dans le HTML rendu par simplicité pour ne pas gâcher votre code HTML visuel !

<script setup>
const count = ref(0); // ref
</script>

<template>
    <!-- Le Compilateur Vue interceptera ce code juste avant de l'envoyer au navigateur et le compilera secrètement en:  `count.value` ! -->
    <p>{{ count }}</p>
</template>

Les Très Gros Pièges (Caveats) de Réactivité Majeurs Industriels en JS !!

1. La Déstructuration d’Objet ES6 Brise Sévèrement, Instamment et Définitivement toute forme de Réactivité !

const state = reactive({ count: 0 });

// ❌ L'HORREUR : 'count' n'est MAINTENANT QU'UN VULGAIRE CHIFFRE MORT PRIMITIF MORT NON REACTIF : Mettez ca à la corbeille !!!! L'Object Proxy de base Vue 'state' n'a plus AUCUN lien ou regard dessus !!
let { count } = state;
count++; // RIEN NE SE PRODUIT !! AUCUN UPDATE RIEN !! Vous avez cassé l'alarme !

// ✅ L'APPROCHE 1: Continuez bêtement à taper `state.count`
state.count++;

// ✅ L'APPROCHE 2 : Transformez par magie d'abord vos vieilles propriétés en Ref individuelles détachables pures !`
const { count } = toRefs(state);
count.value++; // Et ça, ÇA MARCHE ! Alléluia !

2. Écraser Totalement (Remplacer Brute par assignation =) un Grand Objet “Reactive()” le TUE !

let state = reactive({ count: 0 });

// ❌ HORREUR FATALE 2 : Écrasage pur de la Variable = Perte Intégrale Définitive de toute l'historique de la Réactivité Mère originelle !! Le nouveau gros objet écrasant ici '{count:1}' n'a jamais été traqué depuis la naissance de la page !!
state = reactive({ count: 1 });

// ✅ APPROCHE 1 : Modifier UNIQUEMENT bêtement et humblement très spécifiquement une par une ses sous-propriétés
state.count = 1;

// ✅ APPROCHE 2 : Si vous devez re-remplir l'objet massivement depuis une base de donnée, Utilisez alors le GROS emballage vide ref() dès le départ pour définir ce grand conteneur massif !
const state = ref({ count: 0 });
// Car OUI, dans ce scénario : L'alarme Set Value racine de REF protège toujours le grand emballage global !
state.value = { count: 1 }; // Succès absolu et merveilleuse réactivité conservée !

3. La Réactivité JS “Directe” Ne Fonctionne JAMAIS sur de pauvres types “Primitives JS” Isolées (Chiffre , String) !

// ❌ Les primitives banales de javascript sont juste des bytes statiques perdus ne peuvent PAS recevoir de cerveau "Proxy" de l'intérieur bêtement
const count = reactive(0); // Ça renvoie lamentablement 0, et un null non-proxy

// ✅ Obligé pour elle de l'emballer dans une boite en carton (Où la la boite devient un le piège Object)
const count = ref(0);

Le Système des Effets Mécaniques (Effect System)

Concrètement lourdement, quand on dit que le Moteur de Vue agit partout sous le capot magique à base de réactivité “Proxy + Track/Trigger”, il utilise ce mécanisme caché des D’Effets en Temps Réel :

┌──────────────────────────────────────────────────────┐
│                    "Running Effect"                  │
│  (Le Mécanique de Vue qui est entrain de tourner...  │
│ .. que cela soit pour dessiner l'HTML template, ou   │
│ exécuter le getter d'un computed ou le callback Watch)
└──────────────────────────────────────────────────────┘
                         │
                         ▼
               ┌─────────────────────┐
               │    Bim. Je lis un   │
               │   `state.count` !!  │
               └─────────────────────┘
                         │
                         ▼
           ┌───────────────────────────┐
           │ Vue l'enregistre: Ah, O K │
           │ Cet Effet en cours dépend │
           │ de count. J'ai noté l'info!
           └───────────────────────────┘
                         │
        Plus tard... Quand `state.count` viendra à changer brutalement...
                         │
                         ▼
           ┌───────────────────────────┐
           │ Vue dit: Alerte ! Relancez│
           │ de NOUVEAU instantanément │
           │ TOUS les effets associés!!│
           └───────────────────────────┘

Ce “suivi infaillible et automatique absolu” : C’est la prodigieuse “Magie Divine” originelle unique au monde de la réactivité impressionnante de Vue !

Les Très Grandes Ressources Externes

La Réactivité au Peigne fin (Référence Absolue Ultime par la core Team et Evan You) — La documentation la plus folle et difficile de la team pour comprendre les rouages complet de la théorie du réactor.

📘 Cette leçon fait partie du cours Maîtrise de la Réactivité Vue sur la plateforme d’apprentissage RostoDev.