Vue Academy · Leçon

ref ou reactive : quand utiliser chacun ?

Accès à ref.value, déballage de reactive dans les modèles, toRefs(), toRef() pour la déstructuration.

ref ou reactive : quand utiliser chacun ? est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Deux outils de réactivité

Vue propose deux principales façons de créer un état réactif : ref() et reactive(). Elles se recouvrent en partie, mais chacune convient mieux à certaines situations. Savoir laquelle choisir permet de garder un code propre.

ref fonctionne avec n’importe quelle valeur

ref() peut envelopper n’importe quoi : un nombre, une chaîne de caractères, un booléen, un tableau ou un objet. En JavaScript, la valeur se trouve dans .value.

import { ref } from 'vue'

const count = ref(0)
const name = ref('Alice')
const isOpen = ref(false)

count.value++
name.value = 'Bob'

ref se déballe automatiquement dans les modèles

Alors que vous devez écrire .value en JavaScript, le modèle déballe automatiquement une référence de premier niveau. Ainsi, {{ count }} fonctionne directement.

<!-- template -->
<p>{{ count }} - {{ name }}</p>

reactive est destiné aux objets

reactive() n’accepte que des objets (y compris les tableaux et les objets Map). Il renvoie un proxy profondément réactif et vous accédez directement aux propriétés : aucun .value.

import { reactive } from 'vue'

const state = reactive({
  name: 'Alice',
  age: 30,
  hobbies: ['reading']
})

state.age = 31
state.hobbies.push('coding')

reactive est réactif en profondeur

Les objets imbriqués et les tableaux contenus dans un objet reactive sont eux aussi réactifs. La modification d’une propriété imbriquée déclenche les mises à jour sans travail supplémentaire.

const state = reactive({ profile: { city: 'Paris' } })
state.profile.city = 'Berlin' // reactive!

La limite de reactive : la déstructuration interrompt la réactivité

Si vous déstructurez un objet reactive, les variables extraites deviennent des valeurs ordinaires et perdent leur réactivité. C’est le piège le plus courant.

const state = reactive({ name: 'Alice' })
let { name } = state
name = 'Bob'
// state.name is still 'Alice' - reactivity lost!

La solution : toRefs pour déstructurer en toute sécurité

toRefs() convertit chaque propriété d’un objet réactif en référence. Vous pouvez alors déstructurer l’objet tout en conservant la réactivité, car chaque élément reste une référence liée à la source.

import { reactive, toRefs } from 'vue'

const state = reactive({ name: 'Alice', age: 30 })
const { name, age } = toRefs(state)
name.value = 'Bob' // state.name is now 'Bob'

toRef pour une seule propriété

Si vous n’avez besoin que d’une seule propriété sous forme de référence, utilisez toRef(state, 'key'). Elle reste synchronisée dans les deux sens avec l’objet source.

import { reactive, toRef } from 'vue'

const state = reactive({ age: 30 })
const age = toRef(state, 'age')
age.value = 31 // state.age is now 31

Une règle pratique

Utilisez ref() pour les valeurs primitives (nombres, chaînes de caractères, booléens) et les valeurs autonomes.
Utilisez reactive() pour un groupe de propriétés liées qui forment un seul objet.
Lorsque vous renvoyez un objet réactif depuis une fonction composable, enveloppez-le dans toRefs().

ref peut aussi contenir des objets

Vous n’êtes pas obligé de choisir reactive pour les objets. Une ref contenant un objet est également réactive en profondeur : vous y accédez simplement par .value. De nombreuses équipes utilisent ref partout pour garder une cohérence.

const user = ref({ name: 'Alice' })
user.value.name = 'Bob' // reactive
user.value = { name: 'Carol' } // replace whole object

Tableau récapitulatif

ref : n’importe quelle valeur, nécessite .value en JS, se déballe automatiquement dans le modèle et peut être entièrement réassignée.
reactive : objets uniquement, sans .value, réactif en profondeur, mais cesse de l’être lors de la déstructuration et ne peut pas être réassigné.
toRefs : pont qui rend les propriétés réactives déstructurables.

Vérification rapide

Choisissez le bon outil.

Récapitulatif

Points essentiels :

ref() enveloppe n’importe quelle valeur et nécessite .value en JavaScript.
reactive() est destiné aux objets et est réactif en profondeur, mais la déstructuration interrompt sa réactivité.
toRefs() vous permet de déstructurer un objet réactif en toute sécurité.
Utilisez ref pour les valeurs primitives et reactive pour l’état regroupé dans un objet.

Questions Fréquemment Posées

La leçon « ref ou reactive : quand utiliser chacun ? » est-elle gratuite ?

Oui — le texte complet de « ref ou reactive : quand utiliser chacun ? » 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 4 leçons au total.

Qu'est-ce que j'apprendrai dans « ref ou reactive : quand utiliser chacun ? » ?

Accès à ref.value, déballage de reactive dans les modèles, toRefs(), toRef() pour la déstructuration. 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 4.

Combien de temps prend la leçon « ref ou reactive : quand utiliser chacun ? » ?

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

Pourquoi l’API Composition ?
Fonction setup() et variables réactives
ref ou reactive : quand utiliser chacun ?
Computed et watch dans l’API Composition

← Retour à Vue Academy