Vue 3 a introduit la Composition API comme alternative à l'Options API traditionnelle. Cette nouvelle approche apporte flexibilité, meilleure organisation du code et réutilisabilité accrue pour les projets vue complexes. Elle n'est pas un remplacement forcé mais une option puissante à connaître.
Pourquoi la Composition API ?
L'Options API organise le code par type (data, methods, computed, watch). Pour les composants simples, c'est parfait. Mais pour des composants complexes gérant plusieurs fonctionnalités distinctes, le code devient difficile à suivre car la logique liée à une même fonctionnalité est dispersée dans différentes sections.
La Composition API permet de regrouper la logique par fonctionnalité, facilitant l'extraction en composables réutilisables. Le TypeScript support est aussi nettement amélioré.
Le bloc setup()
Tout commence dans setup(), le point d'entrée de la Composition API. Il s'exécute avant la création du composant et retourne les éléments exposés au template :
export default {
setup() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
}
Avec la syntaxe