La Composition API de Vue 3 représente une évolution majeure dans la façon de structurer les composants Vue. Cette approche permet d'organiser le code par fonctionnalité plutôt que par option, facilitant la réutilisation et la maintenance des applications complexes. Ce guide suppose une connaissance de base de Vue.js. Les exemples utilisent la syntaxe ` ``` Pour les objets avec plusieurs propriétés liées, `reactive` offre une syntaxe plus naturelle sans avoir besoin de `.value`. ```javascript // UserProfile.vue ``` La règle générale : utiliser `ref` pour les valeurs primitives (string, number, boolean) et `reactive` pour les objets structurés. ## Propriétés calculées avec computed Les propriétés calculées permettent de dériver des valeurs à partir de l'état réactif. Elles sont mises en cache et ne se recalculent que lorsque leurs dépendances changent, ce qui les rend très performantes. ```javascript // ProductList.vue ``` Les computed peuvent également être en écriture avec un getter et un setter, utile pour les transformations bidirectionnelles. ```javascript // FullName.vue ``` ## Observateurs avec watch et watchEffect Les watchers permettent d'exécuter des effets secondaires en réponse aux changements de données. Vue 3 propose deux approches : `watch` pour un contrôle précis et `watchEffect` pour le tracking automatique. `watch` offre un contrôle précis sur les dépendances et fournit l'ancienne et la nouvelle valeur. `watchEffect` est plus simple quand toutes les dépendances réactives utilisées doivent déclencher l'effet. ```javascript // SearchComponent.vue ``` Pour observer des objets imbriqués ou des tableaux, l'option `deep` est nécessaire avec `watch`. ```javascript // DeepWatch.vue ``` ## Créer des composables réutilisables Les composables sont des fonctions qui encapsulent de la logique réactive réutilisable. Cette approche est l'un des atouts majeurs de la Composition API pour partager du code entre composants. ```javascript // composables/useFetch.js import { ref, watchEffect, toValue } from 'vue' // Composable pour les requêtes HTTP // Gère automatiquement le loading, les erreurs et le refetch export function useFetch(url) { const data = ref(null) const error = ref(null) const isLoading = ref(false) // Fonction de fetch réutilisable async function fetchData() { isLoading.value = true error.value = null try { // toValue() permet d'accepter une ref ou une valeur const response = await fetch(toValue(url)) if (!response.ok) { throw new Error(`HTTP ${response.status}`) } data.value = await response.json() } catch (e) { error.value = e.message } finally { isLoading.value = false } } // watchEffect pour refetch automatique si url est une ref watchEffect(() => { fetchData() }) // Exposer l'état et les méthodes return { data, error, isLoading, refetch: fetchData } } ``` Ce composable s'utilise ensuite dans n'importe quel composant de manière déclarative. ```javascript // UserList.vue ``` Voici un autre exemple de composable pour gérer l'état d'un formulaire avec validation. ```javascript // composables/useForm.js import { reactive, computed } from 'vue' // Composable de gestion de formulaire export function useForm(initialValues, validationRules) { // État du formulaire const form = reactive({ values: { ...initialValues }, errors: {}, touched: {} }) // Valider un champ spécifique const validateField = (field) => { const rules = validationRules[field] if (!rules) return true for (const rule of rules) { const result = rule(form.values[field]) if (result !== true) { form.errors[field] = result return false } } form.errors[field] = null return true } // Valider tout le formulaire const validate = () => { let isValid = true for (const field in validationRules) { if (!validateField(field)) { isValid = false } } return isValid } // computed: formulaire valide si aucune erreur const isValid = computed(() => { return Object.values(form.errors).every(e => !e) }) // Marquer un champ comme touché (pour afficher les erreurs) const touch = (field) => { form.touched[field] = true validateField(field) } // Réinitialiser le formulaire const reset = () => { form.values = { ...initialValues } form.errors = {} form.touched = {} } return { form, isValid, validate, validateField, touch, reset } } ``` ## Gestion du cycle de vie La Composition API propose des hooks de cycle de vie sous forme de fonctions à appeler dans le setup. Ces hooks permettent d'exécuter du code à des moments précis de la vie du composant. Toujours nettoyer les effets secondaires (timers, event listeners, subscriptions) dans `onUnmounted` pour éviter les fuites mémoire. ```javascript // LifecycleDemo.vue ``` ## Refs de template et accès au DOM Les refs de template permettent d'accéder directement aux éléments DOM ou aux instances de composants enfants. Cela reste utile pour les cas où la manipulation directe est nécessaire. ```javascript // InputFocus.vue ``` ## Communication parent-enfant avec props et emits La Composition API modernise la déclaration des props et events avec `defineProps` et `defineEmits`, offrant une meilleure intégration TypeScript. ```javascript // ChildComponent.vue ``` ```javascript // ParentComponent.vue ``` ## Provide et Inject pour l'injection de dépendances Pour partager des données entre composants distants sans prop drilling, Vue 3 propose `provide` et `inject`. ```javascript // App.vue (ou un composant ancêtre) ``` ```javascript // DeepNestedComponent.vue (n'importe où dans l'arbre) ``` ## Conclusion La Composition API de Vue 3 offre une approche puissante et flexible pour organiser le code des applications Vue. Les concepts clés à retenir : - ✅ **ref** pour les valeurs primitives, **reactive** pour les objets complexes - ✅ **computed** pour les valeurs dérivées avec mise en cache automatique - ✅ **watch** et **watchEffect** pour les effets secondaires réactifs - ✅ **Composables** pour extraire et réutiliser la logique entre composants - ✅ **Hooks de cycle de vie** fonctionnels (`onMounted`, `onUnmounted`, etc.) - ✅ **provide/inject** pour l'injection de dépendances sans prop drilling Cette approche facilite la création d'applications maintenables et testables, tout en offrant une excellente intégration TypeScript. La prochaine étape consiste à explorer les patterns avancés comme les composables asynchrones et l'intégration avec Pinia pour la gestion d'état globale.

{{ user.name }}

{{ title }}