Vue Academy · Leçon

Fonction setup() et variables réactives

Point d’entrée setup(), ref() pour les primitives, reactive() pour les objets, renvoi de valeurs.

Fonction setup() et variables réactives est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Le point d’entrée setup()

L’API de composition se trouve dans une option spéciale du composant appelée setup(). Elle s’exécute une fois, avant la création du composant, et c’est là que vous déclarez l’état réactif et les fonctions.

Tout ce que vous return depuis setup() devient disponible dans le modèle.

Créer un état réactif avec ref

ref() enveloppe une valeur unique (nombre, chaîne de caractères, booléen ou même objet) dans un conteneur réactif. La valeur réelle se trouve dans la propriété .value.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    console.log(count.value) // 0
    return { count }
  }
}

Créer des objets réactifs avec reactive

reactive() prend un objet ordinaire et renvoie un proxy profondément réactif. Vous accédez directement à ses propriétés : il n’y a pas de .value.

import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 30 })
    console.log(user.name) // Alice
    return { user }
  }
}

Renvoyer l’état au modèle

Tout ce qui est renvoyé par setup() sous forme d’objet devient une liaison du modèle. Ici, count et user sont tous deux exposés.

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    return { count, user }
  }
}

Déballage automatique dans le modèle

En JavaScript, vous avez écrit count.value. Dans le modèle, vous écrivez simplement count. Vue déballe automatiquement les références de premier niveau, vous n’écrivez donc jamais .value dans le modèle.

<!-- template -->
<p>Count: {{ count }}</p>
<p>Name: {{ user.name }}</p>

Ajouter des fonctions

Les fonctions définies dans setup() peuvent lire et modifier l’état réactif. Souvenez-vous qu’en JavaScript, vous devez toujours utiliser .value pour les références.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() { count.value++ }
    return { count, increment }
  }
}

Relier le tout dans le modèle

Renvoyez la fonction et liez-la à un événement. Lorsque vous cliquez sur le bouton, increment est appelée, la référence est modifiée et Vue effectue un nouveau rendu.

<!-- template -->
<button @click="increment">Count is {{ count }}</button>

Pas besoin du mot-clé this

À l’intérieur de setup(), il n’y a pas de this. Vous travaillez directement avec les variables que vous avez déclarées. Le code est ainsi plus facile à comprendre et mieux adapté à TypeScript.

Utiliser this dans setup() ne vous donnera pas accès à l’instance du composant.

setup s’exécute avant la création

setup() s’exécute très tôt — avant created et avant que l’instance du composant soit entièrement configurée. C’est pourquoi this n’est pas disponible et pourquoi vous ne pouvez pas encore accéder au DOM ici.

Arguments de setup : props et contexte

setup(props, context) reçoit les props résolues comme premier argument et un objet de contexte comme second. Le contexte expose attrs, slots, emit et expose.

export default {
  props: { title: String },
  setup(props, context) {
    console.log(props.title)
    context.emit('ready')
  }
}

Un mini-composant complet

Voici tous les éléments réunis : une référence, un objet réactif, une fonction et les liaisons renvoyées.

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    function increment() { count.value++ }
    return { count, user, increment }
  }
}

Vérification rapide

Assurez-vous de comprendre setup() et les variables réactives.

Récapitulatif

Vous avez appris les fondements de l’API de composition :

setup() s’exécute une fois avant la création et renvoie les liaisons du modèle.
ref() enveloppe une valeur — utilisez .value en JS.
reactive() enveloppe un objet — accédez directement à ses propriétés.
Les modèles débloquent automatiquement les références, vous pouvez donc y omettre .value.
Il n’y a pas de this à l’intérieur de setup().

Questions Fréquemment Posées

La leçon « Fonction setup() et variables réactives » est-elle gratuite ?

Oui — le texte complet de « Fonction setup() et variables réactives » 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 « Fonction setup() et variables réactives » ?

Point d’entrée setup(), ref() pour les primitives, reactive() pour les objets, renvoi de valeurs. 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 2 sur 4.

Combien de temps prend la leçon « Fonction setup() et variables réactives » ?

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