08- Comprendre les bases de la réactivité : ref() vs reactive()

Partie 1 : Comprendre les bases de la réactivité

Qu’est-ce que la réactivité ?

La réactivité est le cœur de Vue.js. C’est la capacité du framework à mettre à jour automatiquement l’interface quand les données changent.

// Sans réactivité
let count = 0;
count = 1; // L'interface ne se met pas à jour automatiquement

// Avec réactivité Vue
const count = ref(0);
count.value = 1; // L'interface se met à jour automatiquement !

---

🔍 Partie 2 : Définition détaillée de ref()

Qu’est-ce que ref() ?

ref() crée une référence réactive pour une valeur primitive ou un objet.

import { ref } from 'vue';

// Syntaxe de base
const maVariable = ref(valeurInitiale);

Pourquoi utiliser ref() ?

1. Pour les valeurs primitives (string, number, boolean)
2. Pour avoir une référence unique à une valeur
3. Pour la réactivité simple

Comment ça marche sous le capot ?

// Vue fait approximativement ceci :
function ref(value) {
    return {
        value: value,
        // Vue ajoute ici la magie réactive
        // qui détecte les changements
    };
}

Voici chaque exemple associé à son script et à une explication détaillée, en utilisant uniquement ref() et reactive() comme demandé, et en englobant le script dans <script setup lang="ts">. Les propriétés calculées (computed) ont été remplacées par des accès directs aux valeurs réactives.

---

1. Exemple 1 : Compteur de clics

Template :

<template>
    <div class="example">
        <h3>1. Compteur de clics</h3>
        <p>Vous avez cliqué {{ count }} fois</p>
        <button @click="increment">Cliquez-moi !</button>
        <button @click="reset">Reset</button>
    </div>
</template>

Script :

<script setup lang="ts">
import { ref } from 'vue'

const count = ref<number>(0)

const increment = (): void => {
  count.value++
}

const reset = (): void => {
  count.value = 0
}
</script>

Explication :

• count : Une variable réactive initialisée à 0 pour suivre le nombre de clics.
• increment : Une fonction qui incrémente count de 1 à chaque clic.
• reset : Une fonction qui réinitialise count à 0.

---

2. Exemple 2 : Gestion de texte

Template :

<template>
    <div class="example">
        <h3>2. Gestion de texte</h3>
        <input v-model="message" placeholder="Tapez quelque chose..." />
        <p>Message : {{ message }}</p>
        <p>Longueur : {{ message.length }} caractères</p>
    </div>
</template>

Script :

<script setup lang="ts">
import { ref } from 'vue'

const message = ref<string>('Bonjour Vue 3 !')
</script>

Explication :

• message : Une variable réactive pour stocker le texte saisi.
• v-model : Lie l’input à message pour une mise à jour bidirectionnelle.
• message.length : Accède directement à la longueur de message sans utiliser computed.

---

3. Exemple 3 : Interrupteur

Template :

<template>
    <div class="example">
        <h3>3. Interrupteur</h3>
        <button @click="toggleLights">
            {{ isLightOn ? '💡 Allumé' : '🔌 Éteint' }}
        </button>
        <div class="light" :class="{ on: isLightOn }"></div>
    </div>
</template>

Script :

<script setup lang="ts">
import { ref } from 'vue'

const isLightOn = ref<boolean>(false)

const toggleLights = (): void => {
  isLightOn.value = !isLightOn.value
}
</script>

Explication :

• isLightOn : Une variable réactive pour représenter l’état de l’interrupteur.
• toggleLights : Une fonction qui inverse la valeur de isLightOn.
• :class : Applique dynamiquement la classe .on si isLightOn est true.

---

Partie 3 : Définition détaillée de reactive()

Qu’est-ce que reactive() ?

reactive() crée un objet réactif dont toutes les propriétés sont réactives.

import { reactive } from 'vue';

// Syntaxe de base
const monObjet = reactive({ propriete: valeur });

Pourquoi utiliser reactive() ?

1. Pour les objets complexes (utilisateurs, formulaires, etc.)
2. Quand on a plusieurs propriétés liées
3. Pour une syntaxe plus naturelle (pas de .value)

Différence fondamentale avec ref()

// Avec ref() - besoin de .value
const userRef = ref({ name: 'Owen', age: 25 });
userRef.value.name = 'Rostand'; // Accès via .value

// Avec reactive() - accès direct
const userReactive = reactive({ name: 'Owen', age: 25 });
userReactive.name = 'Rostand'; // Accès direct !

4. Exemple 4 : Utilisation de reactive pour un objet

Template :

<template>
    <div class="example">
        <h3>4. Utilisation de reactive pour un objet</h3>
        <p>Nom : {{ user.name }}</p>
        <p>Âge : {{ user.age }}</p>
        <button @click="updateUserAge">Augmenter l'âge</button>
    </div>
</template>

Script :

<script setup lang="ts">
import { reactive } from 'vue'

const user = reactive({
  name: 'Owen Dupont',
  age: 30,
})

const updateUserAge = (): void => {
  user.age++
}
</script>

Explication :

• user : Un objet réactif contenant deux propriétés : name et age.
• updateUserAge : Une fonction qui incrémente l’âge de l’utilisateur de 1.

---

Résumé :

Chaque exemple est associé à son script et à une explication détaillée, démontrant comment les variables réactives (ref) et les objets réactifs (reactive) sont utilisés pour créer des interactions dynamiques dans Vue 3. Ces associations illustrent les concepts clés de Vue 3 de manière pratique et facile à comprendre. 🚀

Partie 4 : Tableau comparatif détaillé

Quand utiliser ref() vs reactive() ?

Critère ref() reactive() Type de données Valeurs primitives (string, number, boolean) Objets, tableaux Accès aux valeurs Avec .value dans le script Accès direct Template Pas de .value Accès direct Réaffectation Possible avec .value Impossible (perd la réactivité) Utilisation typique Variables simples Données structurées

Règles pratiques pour les débutants

// ✅ BONNES PRATIQUES

// Pour les valeurs simples → ref()
const count = ref(0);
const name = ref('Owen');
const isLoading = ref(false);

// Pour les objets complexes → reactive()
const user = reactive({
    name: 'Eva',
    age: 25,
    address: { city: 'Paris' },
});

const form = reactive({
    email: '',
    password: '',
    rememberMe: false,
});

// ❌ MAUVAISES PRATIQUES À ÉVITER

// Ne pas utiliser reactive() pour des primitives
const count = reactive({ value: 0 }); // ❌ Trop lourd

// Ne pas réaffecter un objet reactive()
const user = reactive({ name: 'Owen' });
user = { name: 'Rostand' }; // ❌ Perd la réactivité

// Préférer ça :
Object.assign(user, { name: 'Rostand' }); // ✅ Garde la réactivité

🎯 Conclusion

Points clés à retenir

1. ref() pour les valeurs simples (string, number, boolean)
2. reactive() pour les objets complexes
3. .value nécessaire avec ref() dans le script
4. Accès direct avec reactive()
5. TypeScript améliore la sécurité et l’auto-complétion

Prochaines étapes