Pendant des années, l'API Options a servi de méthode standard pour organiser la logique dans les applications Vue.js. Bien qu'efficace pour les composants de taille petite à moyenne, elle conduisait souvent à une « soupe d'options » dans les projets complexes, où la logique connexe était dispersée dans les propriétés data, methods et watchers. Voici l'API de Composition, un ensemble d'APIs qui vous permettent de créer des composants Vue en utilisant des fonctions importées au lieu de déclarer des options.
Dans cet article, nous explorerons pourquoi l'API de Composition est un changement majeur pour les applications à grande échelle, comment exploiter ses primitives réactives et fournirons des exemples de code pratiques pour vous aider à transitionner votre flux de travail.
Pourquoi l'API de Composition ?
La motivation principale derrière l'API de Composition est la réutilisation et l'organisation de la logique. Dans l'API Options, si vous avez un composant complexe gérant l'authentification utilisateur, la validation de formulaire et les appels API, vous pourriez vous retrouver à sauter entre différentes sections du code pour comprendre une seule fonctionnalité. L'API de Composition résout ce problème en vous permettant de regrouper la logique connexe au même endroit.
De plus, l'API de Composition est construite sur du JavaScript standard. Elle offre un meilleur support pour l'inférence de TypeScript et permet aux développeurs d'extraire la logique réutilisable dans des composables — essentiellement la réponse de Vue aux React Hooks, mais avec un suivi de la réactivité plus intuitif.
Concepts clés : Ref et Reactive
Pour utiliser l'API de Composition, vous devez comprendre ses deux principales primitives de réactivité : ref et reactive. Bien que les deux rendent l'état réactif, elles servent des cas d'utilisation différents.
ref est utilisé pour contenir des valeurs primitives (chaînes de caractères, nombres, booléens) ou des objets. Lorsque vous accédez à un ref dans le modèle, Vue le déballera automatiquement. Cependant, en JavaScript, vous devez accéder à la valeur via la propriété .value.
reactive crée un proxy réactif d'un objet. Il est idéal pour les structures de données complexes mais ne peut pas remplacer la référence d'objet originale. Il est généralement préféré pour les objets et les tableaux.
<script setup>
import { ref, reactive } from 'vue';
// Utilisation de ref pour une valeur primitive unique
const count = ref(0);
// Utilisation de reactive pour un objet
const user = reactive({
name: 'Alice',
email: 'alice@example.com',
role: 'developer'
});
function increment() {
// Accès à .value pour modifier le ref
count.value++;
}
function changeRole(newRole) {
// Accès direct pour les objets réactifs
user.role = newRole;
}
</script>
<template>
<div>
<p>Compteur : {{ count }}</p>
<p>Rôle de l'utilisateur : {{ user.role }}</p>
<button @click="increment">Incrémenter</button>
</div>
</template>Composables : Extraction de la logique
L'une des fonctionnalités les plus puissantes de l'API de Composition est la capacité de créer des composables. Un composable est simplement une fonction qui utilise les APIs de Composition de Vue pour encapsuler et réutiliser la logique avec état. Cela favorise une architecture « une responsabilité par fichier ».
Par exemple, au lieu de mélanger la logique de récupération d'API dans votre composant, vous pouvez créer un composable useFetch.
useFetch.js
import { ref, onMounted } from 'vue';
export function useFetch(url) {
const data = ref(null);
const error = ref(null);
const loading = ref(true);
onMounted(async () => {
try {
const response = await fetch(url);
if (!response.ok) throw new Error('La réponse réseau n\'était pas correcte');
data.value = await response.json();
} catch (e) {
error.value = e.message;
} finally {
loading.value = false;
}
});
return { data, error, loading };
}Maintenant, dans votre composant, vous pouvez simplement importer et utiliser cette logique :
<script setup>
import { useFetch } from './useFetch';
const { data, error, loading } = useFetch('/api/users');
</script>Meilleures pratiques pour l'adoption
Lors de la migration ou du démarrage de nouveaux projets, gardez ces meilleures pratiques à l'esprit :
- Utilisez <script setup> : Cette macro de compilateur offre une syntaxe plus concise pour utiliser l'API de Composition, éliminant le besoin de retourner des variables depuis la fonction setup.
- Gardez les Composables Ciblés : Chaque composable devrait gérer une seule responsabilité, comme la gestion de l'état du formulaire, les appels API ou la gestion des événements de glisser-déposer.
- Privilégiez les Refs par défaut : Bien que reactive soit utile, les refs sont plus polyvalentes car elles peuvent être réassignées entièrement. Utilisez reactive pour les objets complexes où vous modifiez les propriétés en profondeur.
Conclusion
L'API de Composition Vue 3 n'est pas seulement une nouvelle syntaxe ; c'est un changement fondamental dans la façon dont nous pensons l'architecture des composants. En permettant une meilleure organisation du code, un support TypeScript amélioré et une réutilisation robuste de la logique via les composables, elle permet aux développeurs de construire des applications évolutives, maintenables et performantes.
Que vous migriez une application Vue 2 existante ou que vous commenciez à zéro avec Vue 3, maîtriser l'API de Composition est une étape essentielle dans votre parcours de développement frontend. Commencez par refactoriser un composant complexe aujourd'hui et ressentez la différence en termes de clarté et de structure.