Introduction à script setup
Compilation de vers setup(), importations automatiques, liaisons de niveau supérieur disponibles dans le modèle.
Introduction à script setup est une leçon Vue 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Une API de composition plus claire
<script setup> est du sucre syntaxique évalué à la compilation pour l'API de composition. Il supprime le code répétitif, afin que vos composants à fichier unique ressemblent à du JavaScript ordinaire avec des variables réactives.
De setup() à script setup
La forme classique nécessite un export default, une fonction setup() et un return explicite. Comparez-la à la version <script setup>.
<!-- classic -->
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
}
}
</script>La version script setup
Avec <script setup>, il n'y a ni objet conteneur ni instruction return. Les variables de niveau supérieur sont automatiquement accessibles dans le modèle.
<!-- script setup -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Aucun return explicite nécessaire
Le compilateur considère chaque liaison de niveau supérieur — variables, fonctions et imports — comme disponible dans le modèle. Vous écrivez moins de code et ne risquez pas d'oublier de retourner un élément.
Les fonctions de niveau supérieur sont également disponibles
Définissez une fonction au niveau supérieur et liez-la directement au modèle. Il n'est pas nécessaire de la retourner.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>Les composants importés s'enregistrent automatiquement
Avec l'API classique, vous deviez répertorier les composants dans une option components. Avec <script setup>, il suffit d'importer un composant pour pouvoir l'utiliser dans le modèle.
<script setup>
import BaseButton from './BaseButton.vue'
</script>
<template>
<BaseButton />
</template>La compilation produit toujours setup()
En interne, le compilateur transforme <script setup> en une fonction setup() classique. Vous bénéficiez du même comportement et des mêmes performances, avec une écriture plus claire.
Ajouter TypeScript avec lang ts
Activez TypeScript en ajoutant lang="ts" à la balise. Vous pouvez ensuite typer les variables, utiliser des types génériques avec les macros du compilateur et bénéficier d'une inférence de types complète.
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
</script>Macros du compilateur
Dans <script setup>, vous disposez de macros spéciales du compilateur comme defineProps, defineEmits et defineExpose. Elles ne sont pas importées : le compilateur les reconnaît. Vous les étudierez dans les prochaines leçons.
Associer un bloc script normal
Vous avez parfois besoin d'options qui ne s'exécutent qu'une fois dans la portée du module, comme un nom de composant personnalisé. Vous pouvez ajouter un bloc <script> normal à côté de <script setup>.
<script>
export default { name: 'MyComponent' }
</script>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Pourquoi les équipes préfèrent script setup
- Moins de code répétitif — aucun objet conteneur ni return.
- Enregistrement automatique des composants.
- Meilleures performances à l'exécution grâce à l'analyse à la compilation.
- Excellent support de TypeScript.
C'est le style recommandé pour les composants Vue 3 à fichier unique.
Vérification rapide
Vérifiez votre compréhension de script setup.
Récapitulatif
Vous avez appris les notions essentielles de <script setup> :
- Il s'agit d'un sucre syntaxique évalué à la compilation autour de
setup(). - Aucun return explicite : les liaisons de niveau supérieur sont automatiquement exposées.
- Les composants importés s'enregistrent automatiquement.
- Ajoutez
lang="ts"pour utiliser TypeScript. - Les macros du compilateur comme
definePropssont disponibles sans import.
Questions Fréquemment Posées
La leçon « Introduction à script setup » est-elle gratuite ?
Oui — le texte complet de « Introduction à script setup » 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 « Introduction à script setup » ?
Compilation de vers setup(), importations automatiques, liaisons de niveau supérieur disponibles dans le modèle. 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 1 sur 4.
Combien de temps prend la leçon « Introduction à script setup » ?
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
- Introduction à script setup
- defineProps et defineEmits
- defineExpose et useAttrs
- Importer et utiliser des composables dans script setup