Comprendre l’architecture de script setup

<script setup> est la syntaxe recommandée et moderne pour utiliser l’API de Composition (Composition API) dans les Composants Mono-Fichiers Vue (Single-File Components). Il offre une manière beaucoup plus propre, lisible et concise d’écrire l’intelligence de vos composants Vue.

Pourquoi utiliser script setup ?

Avant (L’API d’Options / La très lourde fonction “setup()”)

<script>
import { ref, computed } from 'vue';
import MyComponent from './MyComponent.vue';

// L'ancienne méthode historique en API d'Options (Très verbeuse et répétitive)
export default {
    components: { MyComponent }, // Il fallait enregistrer à la main
    setup() {
        const count = ref(0);
        const double = computed(() => count.value * 2);

        function increment() {
            count.value++;
        }

        // Le calvaire : Devoir retourner à la main absolument TOUT pour que le code HTML au dessus y accède :
        return {
            count,
            double,
            increment,
        };
    },
};
</script>

Après (Le moderne : script setup)

<!-- On ajoute simplement l'attribut "setup" au <script> -->
<script setup>
import { ref, computed } from 'vue';
import MyComponent from './MyComponent.vue'; // Enregistré O-TO-MA-TI-QUE-MENT !

// Fini l'export default" ou le "setup()" gigantesque !
const count = ref(0);
const double = computed(() => count.value * 2);

function increment() {
    count.value++;
}
// TOUT EST AUTOMATIQUEMENT DISPONIBLE DANS LE TEMPLATE !
</script>

Les Avantages Majeurs

1. Moins de code boilerplate lourd : Plus d’enfer de retour return final introuvable, ni d’option bloc énorme components: pour des listes infinies.
2. Meilleur support TypeScript au monde : Les inférences de Types coulent naturellement par magie sans annotations supplémentaires complexes requises.
3. Meilleure performance de Runtime pure : Le template (HTML) est directement compilé dans le même scope d’exécution pur du script. C’est en moyenne plus rapide de 30%.
4. Auto-imports géniaux : Absolute tous les import propres des composants externes (Boutons, Forms) et directives sont automatiquement branchés directement et utilisable dans l’HTML. Moins d’erreurs !

Ce qui est Disponible dans le Template HTML

Absolument tout ce qui est défini au niveau racine (“Top level”) du script setup est automatiquement et magiquement exposé au Tag <template> :

<script setup>
import { ref, computed } from 'vue';
import BaseButton from './BaseButton.vue'; // Un composant externe classique
import vFocus from './directives/focus'; // Une ligne directive perso externe ("v-focus")

// Variables d'état (State) Réactives
const count = ref(0);
const user = ref({ name: 'Alice' });

// Valeurs Dérivées Computed calculées à la volée
const double = computed(() => count.value * 2);

// Nos Fonctions Métiers JS et événements
function increment() {
    count.value++;
}
const greet = () => alert('Coucou le monde de Vue !');

// Les Constantes Pures globales au Composant
const MAX_COUNT = 100;
</script>

<template>
    <!-- Absolument TOUT ce HTML fonctionne par magie directe sans 'returns' ! -->
    <BaseButton @click="increment">Compteur Actuel : {{ count }}</BaseButton>
    <p>Le Grand Double : {{ double }}</p>
    <p>Mon Utilisateur Web actuel : {{ user.name }}</p>
    <p>Le Plafond Numérique Maximum autorisé : {{ MAX_COUNT }}</p>

    <input v-focus />
</template>

Utiliser