Pourquoi l’API Composition ?
Limites de l’API Options, problème de réutilisation de la logique, avantages de l’API Composition.
Pourquoi l’API Composition ? 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.
Les deux façons d’écrire avec Vue
Vue 3 vous offre deux styles pour écrire la logique des composants : l’API Options et l’API de composition. Les deux produisent le même résultat final, mais organisent le code de manière très différente.
Comprendre ces compromis vous aide à choisir le bon outil et à lire les bases de code existantes en toute confiance.
Comment l’API Options organise le code
L’API Options divise un composant en sections fixes : data, computed, methods, watch et les fonctions du cycle de vie. Chaque élément d’une fonctionnalité se trouve dans une section différente.
Pour une petite fonctionnalité, vous pouvez devoir modifier quatre blocs distincts du fichier.
export default {
data() {
return { count: 0 }
},
computed: {
doubled() { return this.count * 2 }
},
methods: {
increment() { this.count++ }
}
}Le problème : les préoccupations sont dispersées
Lorsqu’un composant grandit, la logique d’une seule fonctionnalité (par exemple, une zone de recherche) se répartit entre data, methods, computed et watch. Vous devez constamment faire défiler le fichier vers le haut et vers le bas pour suivre une même fonctionnalité.
C’est ce qu’on appelle le problème de fragmentation.
API de composition : regrouper par fonctionnalité
L’API de composition vous permet de placer ensemble tout le code correspondant à une même préoccupation logique. L’état réactif, les valeurs dérivées et les fonctions qui les modifient se trouvent côte à côte.
Vous lisez le code de haut en bas et voyez toute une fonctionnalité au même endroit.
import { ref, computed } from 'vue'
export default {
setup() {
const count = ref(0)
const doubled = computed(() => count.value * 2)
function increment() { count.value++ }
return { count, doubled, increment }
}
}Côte à côte
Remarquez comment le deuxième exemple garde count, sa valeur dérivée doubled et increment ensemble. Dans l’API Options, ces trois éléments se trouvaient dans trois sections distinctes.
- API Options : organisée par type d’option
- API de composition : organisée par préoccupation logique
Réutiliser la logique : les mélanges (ancienne méthode)
Avant l’API de composition, le principal outil de réutilisation était constitué des mélanges. Un mélange fusionne ses options avec celles d’un composant.
Mais les mélanges présentent de vrais problèmes : conflits de noms, provenance floue des propriétés et dépendances implicites entre les mélanges.
const counterMixin = {
data() { return { count: 0 } },
methods: { increment() { this.count++ } }
}
export default {
mixins: [counterMixin]
// Where did count come from? Not obvious.
}Réutiliser la logique : les fonctions composables (nouvelle méthode)
Une fonction composable est simplement une fonction qui utilise les API de réactivité et renvoie un état réactif. Vous l’appelez comme n’importe quelle fonction, de sorte que la provenance de chaque valeur est explicite.
Aucune fusion magique ni conflit de noms caché.
import { ref } from 'vue'
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}Utiliser une fonction composable
Importer et appeler la fonction composable montre clairement que count et increment proviennent de useCounter. Vous pouvez même les renommer lors de la déstructuration pour éviter les conflits.
import { useCounter } from './useCounter'
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}Pourquoi les fonctions composables sont préférables aux mélanges
- Provenances explicites — chaque valeur provient d’un appel de fonction visible.
- Aucun conflit de noms — déstructurez et renommez librement.
- Fonctions composables — une fonction composable peut en appeler une autre.
- Compatibles avec le typage — TypeScript déduit automatiquement les types renvoyés.
Un meilleur TypeScript et de meilleurs outils
Comme l’API de composition repose sur des fonctions et des variables ordinaires, TypeScript peut déduire les types sans outils spéciaux. Il n’y a pas de this dont il faudrait maintenir le type écrit manuellement, et les éditeurs fournissent une autocomplétion précise.
Quand utiliser chaque API
L’API de composition est particulièrement adaptée aux composants moyens et grands, ainsi qu’à toute logique que vous souhaitez réutiliser. L’API Options reste parfaitement valable et peut être agréable à lire pour les très petits composants.
Le nouveau code Vue 3 privilégie généralement l’API de composition, en particulier avec <script setup> que vous découvrirez bientôt.
Vérification rapide
Vérifiez ce que vous avez appris sur les raisons d’être de l’API de composition.
Récapitulatif
Dans cette leçon, vous avez appris :
- L’API Options organise le code par type d’option, ce qui disperse une fonctionnalité entre plusieurs sections.
- L’API de composition regroupe le code par préoccupation logique.
- Les mélanges permettent de réutiliser la logique, mais provoquent des conflits de noms et masquent les provenances.
- Les fonctions composables sont des fonctions ordinaires qui renvoient un état réactif — elles sont explicites, sans conflits et composables.
Questions Fréquemment Posées
La leçon « Pourquoi l’API Composition ? » est-elle gratuite ?
Oui — le texte complet de « Pourquoi l’API Composition ? » 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 « Pourquoi l’API Composition ? » ?
Limites de l’API Options, problème de réutilisation de la logique, avantages de l’API Composition. 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 « Pourquoi l’API Composition ? » ?
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