0Pricing
Frontend Academy · Leçon

ref() et reactive()

Créez des primitives réactives avec ref(), encapsulez des objets avec reactive(), comprenez quand utiliser chacune et accédez aux valeurs de ref via .value.

ref() et reactive() est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Réactivité dans Vue 3

L’API Composition de Vue 3 utilise des primitives réactives pour suivre l’état. Deux fonctions essentielles : ref() pour les valeurs primitives et reactive() pour les objets. Les changements apportés à ces valeurs mettent automatiquement à jour l’interface.

ref() pour les valeurs primitives

ref(value) encapsule une valeur dans un conteneur réactif. Accédez à la valeur et modifiez-la via .value dans le script. Dans les templates, Vue désencapsule automatiquement les refs : .value n’est pas nécessaire.

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

const count = ref(0);
const name  = ref('Alice');

function increment() {
  count.value++; // .value in script
}
</script>

<template>
  <p>{{ count }}</p>  <!-- no .value in template -->
  <button @click="increment">+</button>
</template>

reactive() pour les objets

reactive(object) renvoie un proxy profondément réactif de l’objet. Accédez directement aux propriétés : .value n’est nécessaire nulle part.

<script setup>
import { reactive } from 'vue';

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

// Mutate directly:
form.email = 'user@example.com';
</script>

<template>
  <input v-model="form.email">
</template>

ref ou reactive — Quand utiliser chaque fonction

Utilisez ref() pour les valeurs primitives (chaîne, nombre, booléen), les valeurs pouvant être nulles et les valeurs renvoyées par les composables (plus faciles à déstructurer). Utilisez reactive() pour les données liées qui doivent rester regroupées dans un même objet.

Piège de la déstructuration de reactive()

La déstructuration d’un objet réactif fait perdre la réactivité, car les propriétés extraites sont de simples valeurs et non des refs réactives.

const state = reactive({ count: 0 });
const { count } = state; // NOT reactive
count++; // doesn't update Vue's tracking

// Fix: use toRefs() to destructure reactively:
import { toRefs } from 'vue';
const { count } = toRefs(state); // count is now a ref
count.value++;

toRef et toRefs

toRef(obj, 'key') crée une ref liée à une propriété. toRefs(obj) convertit toutes les propriétés d’un objet réactif en refs individuelles liées, que vous pouvez déstructurer sans risque.

import { toRefs } from 'vue';

const user = reactive({ name: 'Alice', age: 30 });
const { name, age } = toRefs(user);
// name and age are refs, still linked to user
name.value = 'Bob'; // user.name also becomes 'Bob'

ref() pour les éléments du DOM

Utilisez ref(null) avec un attribut ref correspondant dans le template pour obtenir une référence réactive vers un élément du DOM ou une instance de composant enfant.

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

const inputEl = ref<HTMLInputElement | null>(null);

onMounted(() => {
  inputEl.value?.focus(); // now the DOM element is available
});
</script>

<template>
  <input ref="inputEl" type="text">
</template>

isRef et unref

isRef(val) vérifie si une valeur est une ref. unref(val) désencapsule une ref ou renvoie la valeur telle quelle s’il ne s’agit pas d’une ref. C’est utile dans les composables qui acceptent à la fois des refs et des valeurs simples.

import { isRef, unref } from 'vue';

function double(val: Ref<number> | number) {
  return unref(val) * 2; // works with both ref and plain number
}

shallowRef et shallowReactive

shallowRef() n’est réactive qu’au niveau supérieur, et non en profondeur. shallowReactive() fonctionne de la même manière pour les objets. Utilisez ces fonctions pour optimiser les performances lorsqu’une réactivité profonde n’est pas nécessaire, par exemple avec de grandes structures de données immuables.

Modifier reactive() ou remplacer l’objet

Avec reactive(), modifiez directement les propriétés. Vous ne pouvez pas remplacer l’objet entier : reactive() a besoin de conserver la même référence. Pour remplacer l’objet, utilisez ref(), qui permet d’écrire ref.value = newObject.

const state = reactive({ items: [] });
state.items.push(newItem); // OK
state.items = [newItem];   // also OK (mutating the property)
// state = reactive({ items: [newItem] }); // LOSES REACTIVITY — can't reassign

Réactivité profonde

reactive() est profondément réactive par défaut : Vue suit les changements apportés aux objets et aux tableaux imbriqués. C’est pratique, mais cela peut coûter cher pour les objets très volumineux. Envisagez shallowReactive dans les cas où les performances sont importantes.

Vérification rapide

Pourquoi la déstructuration d’un objet reactive() fait-elle perdre la réactivité ?

Récapitulatif&nbsp;: ref() et reactive()

ref() encapsule les valeurs primitives : accès via .value dans le script, désencapsulation automatique dans les templates. reactive() rend les objets profondément réactifs : modifiez directement leurs propriétés. La déstructuration fait perdre la réactivité : utilisez toRefs(). ref(null) sert aux refs des éléments du template. shallowRef et shallowReactive servent aux performances. isRef et unref servent aux utilitaires des composables.

Questions Fréquemment Posées

La leçon « ref() et reactive() » est-elle gratuite ?

Oui — le texte complet de « ref() et reactive() » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « ref() et reactive() » ?

Créez des primitives réactives avec ref(), encapsulez des objets avec reactive(), comprenez quand utiliser chacune et accédez aux valeurs de ref via .value. Tu pratiques Frontend 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 Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend 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 1 sur 4.

Combien de temps prend la leçon « ref() et reactive() » ?

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 Frontend Academy ?

Oui. Chaque leçon Frontend 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. ref() et reactive()
  2. computed() et watch()
  3. La fonction setup() et script setup
  4. Composables : fonctions de composition réutilisables
← Retour à Frontend Academy