Composition API
Le Composition API dans Vue.js est une approche moderne pour organiser et structurer la logique des composants, introduite comme une alternative à l’Options API traditionnelle. Son principal avantage réside dans la capacité à modulariser la logique selon les fonctionnalités plutôt que selon les options de composant, ce qui est particulièrement utile pour les applications de grande envergure nécessitant réutilisabilité et maintenabilité du code. Le Composition API permet aux développeurs de séparer l’état réactif, les propriétés calculées et les effets secondaires de manière claire et réutilisable, tout en intégrant des principes avancés tels que la programmation orientée objet, les algorithmes complexes et les structures de données sophistiquées.
Le Composition API s’utilise principalement dans la fonction setup(), qui sert de point d’entrée pour définir l’état et le comportement du composant. Les outils clés incluent ref et reactive pour créer des données réactives, computed pour les états dérivés, et watch pour observer les changements et gérer les effets secondaires. En combinant ces fonctionnalités avec des fonctions composables, les développeurs peuvent extraire et partager la logique entre plusieurs composants, améliorant ainsi la lisibilité et la testabilité du code.
Dans ce tutoriel, les lecteurs apprendront à créer des structures de données réactives, à gérer les événements, à appliquer des logiques algorithmiques dans les composants Vue, et à construire des applications maintenables et évolutives avec le Composition API. Les exemples mettent l’accent sur la résolution de problèmes réels tout en respectant les meilleures pratiques de Vue.js, y compris la gestion correcte de l’état, la gestion des erreurs et l’optimisation des performances, dans un contexte de développement logiciel et d’architecture système.
Exemple de Base
textimport { createApp, ref, computed } from 'vue'
const App = {
setup() {
// État réactif
const counter = ref(0)
// Fonction pour incrémenter
const increment = () => {
counter.value++
}
// Propriété calculée
const doubleCounter = computed(() => counter.value * 2)
return {
counter,
increment,
doubleCounter
}
},
template: ` <div> <h1>Compteur : {{ counter }}</h1> <h2>Compteur x2 : {{ doubleCounter }}</h2> <button @click="increment">Augmenter</button> </div>
`
}
createApp(App).mount('#app')Dans cet exemple de base, la fonction setup() représente le cœur du Composition API, remplaçant les options classiques data, methods et computed de l’Options API. La fonction ref crée une variable réactive unique, counter, qui met automatiquement à jour le template lorsque sa valeur change. La fonction increment illustre la gestion d’événements en modifiant directement counter.value, respectant le système réactif de Vue sans manipulation directe du DOM.
La propriété computed doubleCounter est une valeur dérivée réactive qui dépend de counter, illustrant la puissance du calcul réactif et du suivi des dépendances. Le retour de counter, increment et doubleCounter depuis setup() permet leur utilisation dans le template, montrant comment le Composition API permet de modulariser et réutiliser la logique. Pour les débutants, il est crucial de comprendre l’usage de .value pour les ref et l’importance du retour depuis setup(). Ce modèle garantit un code évolutif, testable et maintenable, facilement extractible en fonctions composables réutilisables.
Exemple Pratique
textimport { createApp, reactive, watch } from 'vue'
const App = {
setup() {
// Objet réactif
const state = reactive({
tasks: [],
newTask: ''
})
// Ajouter une tâche
const addTask = () => {
if (state.newTask.trim() !== '') {
state.tasks.push({ text: state.newTask, done: false })
state.newTask = ''
}
}
// Surveiller les changements de longueur des tâches
watch(() => state.tasks.length, (newLength, oldLength) => {
console.log(`Nombre de tâches changé de ${oldLength} à ${newLength}`)
})
// Supprimer une tâche
const removeTask = (index) => {
state.tasks.splice(index, 1)
}
return {
state,
addTask,
removeTask
}
},
template: ` <div> <h1>Liste de tâches</h1> <input v-model="state.newTask" placeholder="Nouvelle tâche" /> <button @click="addTask">Ajouter</button> <ul> <li v-for="(task, index) in state.tasks" :key="index">
{{ task.text }} <button @click="removeTask(index)">Supprimer</button> </li> </ul> </div>
`
}
createApp(App).mount('#app')L’exemple applique également les principes OOP en encapsulant l’état et les opérations dans une entité logique unique. Le Composition API facilite la modularité, permettant d’extraire facilement la logique de gestion des tâches en fonction composable réutilisable. Les bonnes pratiques incluent la gestion correcte des objets réactifs, éviter la manipulation directe du DOM et nettoyer les watchers pour prévenir les fuites de mémoire, garantissant une application performante et stable en production.
Lors de l’utilisation du Composition API, certaines bonnes pratiques et pièges courants doivent être pris en compte. Il est essentiel de choisir correctement entre ref et reactive : ref pour des valeurs simples, reactive pour des objets ou tableaux. Il faut éviter de créer des computed ou des watch dynamiquement dans des boucles de rendu afin de prévenir les fuites de mémoire et les problèmes de performance.
📊 Tableau de Référence
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| ref | Créer une variable réactive simple | const count = ref(0) |
| reactive | Créer un objet réactif avec plusieurs propriétés | const state = reactive({ name: '', age: 0 }) |
| computed | Créer une propriété calculée dérivée d’autres données réactives | const double = computed(() => count.value * 2) |
| watch | Observer les changements de données réactives et exécuter des effets | watch(() => state.tasks.length, (newVal) => console.log(newVal)) |
| setup | Point d’entrée pour définir l’état et la logique du composant | setup() { const data = ref(0); return { data } } |
Les points clés à retenir sur le Composition API incluent la gestion des états réactifs, l’utilisation efficace des computed et watch, et la modularisation de la logique pour des applications maintenables et évolutives. Le Composition API permet de créer des composants hautement réutilisables, d’améliorer la lisibilité du code et d’intégrer des algorithmes et des principes OOP avancés.
Les prochaines étapes recommandées sont d’explorer les fonctions composables pour la réutilisation de logique, d’intégrer des bibliothèques de gestion d’état comme Pinia pour un état global, et d’apprendre des patterns avancés tels que async setup et suspense. La pratique dans des projets réels renforce la compréhension, améliore les performances et garantit des applications robustes. Les ressources incluent la documentation officielle de Vue, des tutoriels et des projets open source pour approfondir la maîtrise du Composition API.
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut