Vue.js est depuis longtemps célébré pour sa courbe d'apprentissage douce et son design de framework progressif. Avec la sortie de Vue 3, le framework a introduit un changement de paradigme qui répond à l'un des défis les plus importants auxquels sont confrontés les développeurs construisant des applications monopage (SPA) à grande échelle : l'organisation et la réutilisation du code. Ce changement est connu sous le nom d'API de Composition. Bien que l'API Options reste entièrement prise en charge, l'API de Composition offre une manière plus flexible, typée de manière sûre et logiquement cohérente de structurer vos composants. Dans cet article, nous explorerons pourquoi l'API de Composition est un tournant, comment elle fonctionne et comment vous pouvez l'utiliser pour écrire du code Vue plus propre et plus maintenable.
Des Options à la Composition : Résoudre le problème de l'évolutivité
Dans l'API Options traditionnelle, la logique des composants est organisée par type d'option : data, methods, computed et watch. Bien que cela fonctionne bien pour les composants de petite à moyenne taille, cela devient problématique à mesure que la complexité augmente. La logique liée est souvent dispersée entre différentes options, et la logique non liée est regroupée, ce qui rend difficile la compréhension, la maintenance et la refactorisation des gros composants. Par exemple, si vous construisez un widget de tableau de bord complexe, la logique pour récupérer les données, gérer les entrées utilisateur et calculer les métriques d'affichage peut être répartie sur des dizaines de lignes dans différentes parties de la définition du composant.
L'API de Composition résout ce problème en vous permettant d'organiser le code par préoccupation logique plutôt que par type d'option. Au lieu de regrouper le code par data ou methods, vous regroupez la logique liée dans des fonctions. Cette approche conduit à une meilleure lisibilité, une refactorisation plus facile et un support supérieur pour TypeScript, ce qui est crucial pour les applications d'entreprise.
Concepts clés : Ref, Reactive et Composables
Le cœur de l'API de Composition réside dans un ensemble de primitives réactives fournies par le package @vue/reactivity. Les deux fonctions les plus fondamentales sont ref et reactive.
ref est utilisé pour créer des références réactives à des valeurs primitives (comme des chaînes, des nombres ou des booléens). Il contient une valeur dans une propriété .value. reactive, d'autre part, est utilisé pour créer des objets réactifs. Il utilise les Proxies ES6 pour rendre toutes les propriétés de l'objet réactives.
Cependant, la véritable puissance de l'API de Composition est révélée à travers les Composables. Un Composable est simplement une fonction qui utilise les primitives réactives de Vue pour encapsuler et réutiliser la logique avec état. Cela est analogue aux hooks personnalisés dans React, mais avec le système de réactivité de Vue intégré. En extrayant la logique dans des composables, vous pouvez partager un comportement entre plusieurs composants sans recourir aux mixins, qui souffrent de pollution d'espace de noms et d'une provenance des données peu claire.
Exemple pratique : Construire un compteur réutilisable
Regardons un exemple pratique. Supposons que nous ayons besoin d'un compteur qui suit le nombre de fois où un bouton a été cliqué. Dans l'API Options, cela pourrait sembler simple, mais voyons comment nous pouvons le rendre réutilisable avec l'API de Composition.
D'abord, nous créons un Composable appelé useCounter :
// useCounter.js
import { ref } from 'vue';
export function useCounter(initialValue = 0) {
const count = ref(initialValue);
const increment = () => {
count.value++;
};
const decrement = () => {
count.value--;
};
return {
count,
increment,
decrement
};
}
Maintenant, nous pouvons utiliser ce composable dans n'importe quel composant :
// CounterComponent.vue
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script setup>
import { useCounter } from './useCounter';
// Nous pouvons personnaliser la valeur initiale
const { count, increment, decrement } = useCounter(10);
</script>
Remarquez à quel point le code du composant est propre. La logique est abstraite, et le composant se concentre uniquement sur le modèle et l'instance spécifique du compteur. Si nous avons besoin d'un autre compteur ailleurs, nous importons et instancions simplement useCounter à nouveau avec une valeur initiale ou un contexte différent.
Pourquoi vous devriez adopter l'API de Composition
L'adoption de l'API de Composition ne consiste pas seulement à suivre les tendances ; il s'agit d'adopter de meilleures pratiques architecturales. Elle améliore la réutilisabilité du code en permettant le partage de logique sans les inconvénients des mixins. Elle améliore l'inférence de type dans TypeScript, rendant votre base de code plus robuste. Enfin, elle améliore la lisibilité en gardant la logique liée ensemble, ce qui réduit considérablement la charge cognitive lors du débogage ou de l'extension des fonctionnalités.
Conclusion
L'API de Composition de Vue 3 représente une maturation du framework, offrant aux développeurs les outils nécessaires pour construire des applications évolutives, maintenables et performantes. En s'éloignant des structures rigides basées sur les options vers des compositions flexibles basées sur des fonctions, vous pouvez écrire du code plus facile à lire, à tester et à réutiliser. Que vous commenciez un nouveau projet ou que vous refactorisiez un projet existant, adopter l'API de Composition paiera certainement à long terme. Commencez petit en extrayant quelques composables de vos composants complexes, et vous verrez rapidement les avantages de cette fonctionnalité puissante.