Exercices Composition API

Tâche : Dans setup(), crée 3 refs (compteur, message, estActif). Écris une fonction incrementer() qui modifie compteur.value. Retourne tout avec return { ... }.

const { createApp, ref } = Vue; createApp({ setup() { // Crée 3 refs ici avec ref() // const compteur = ref(???) // const message = ref(???) // const estActif = ref(???) function incrementer() { // Modifie compteur avec .value } // Retourne tout return { /* ... */ }; } }).mount('#app');

Tâche : Crée un objet utilisateur avec reactive() (prenom, nom, age, competences[]). Écris une méthode anniversaire() qui incrémente l'âge sans .value.

const { createApp, reactive } = Vue; createApp({ setup() { // Crée l'objet réactif avec reactive() const utilisateur = reactive({ // prenom, nom, age, competences: [] }); function anniversaire() { // Modifie l'âge directement (pas de .value !) } return { utilisateur, anniversaire }; } }).mount('#app');

Tâche : À partir d'un prixHT = ref(100) et d'un taux = ref(0.20), crée deux computed : tva et prixTTC. Elles doivent se mettre à jour quand les refs changent.

const { createApp, ref, computed } = Vue; createApp({ setup() { const prixHT = ref(100); const taux = ref(0.20); // Crée deux computed : tva et prixTTC // const tva = computed(() => ???) // const prixTTC = computed(() => ???) return { prixHT, taux /*, tva, prixTTC */ }; } }).mount('#app');

Tâche : Crée prenom = ref('Alice') et nom = ref('Dupont'). Définis une computed nomComplet avec un get() qui concatène et un set(val) qui les découpe.

const { createApp, ref, computed } = Vue; createApp({ setup() { const prenom = ref('Alice'); const nom = ref('Dupont'); const nomComplet = computed({ get() { // retourne `${prenom.value} ${nom.value}` }, set(valeur) { // découpe la valeur et assigne prenom.value et nom.value } }); return { prenom, nom, nomComplet }; } }).mount('#app');

Tâche : Crée un compteur avec ref(). Utilise watch(compteur, callback) pour loger chaque changement avec l'ancienne et la nouvelle valeur dans un tableau historique.

const { createApp, ref, watch } = Vue; createApp({ setup() { const compteur = ref(0); const historique = ref([]); // watch observe compteur et reçoit (nouvelleVal, ancienneVal) watch(compteur, (nouvelleVal, ancienneVal) => { // Ajoute une entrée à historique.value }); function incrementer() { compteur.value++; } return { compteur, historique, incrementer }; } }).mount('#app');

Tâche : Crée une ref recherche et un statut. Utilise watchEffect() (sans déclarer de dépendances) pour mettre à jour le statut selon la longueur de la recherche. Démontre que watchEffect s'exécute immédiatement.

const { createApp, ref, watchEffect } = Vue; createApp({ setup() { const recherche = ref(''); const statut = ref('En attente...'); // watchEffect détecte automatiquement que recherche.value // est utilisée à l'intérieur watchEffect(() => { // Met à jour statut selon recherche.value.length }); return { recherche, statut }; } }).mount('#app');

Tâche : Crée un objet reactive() avec 4 propriétés. Utilise toRefs() pour le déstructurer et retourner les propriétés individuellement. Démontre que modifier via la ref met à jour l'objet original.

const { createApp, reactive, toRefs } = Vue; createApp({ setup() { const etat = reactive({ nom: 'Alice', age: 28, ville: 'Paris', estActif: true }); // Utilise toRefs pour déstructurer etat // const { nom, age, ... } = toRefs(etat); function anniversaire() { // Modifie age via la ref (age.value++) } return { // ...toRefs(etat), anniversaire }; } }).mount('#app');

Tâche : Crée une app qui utilise les deux : ref() pour les primitives (titre string, compteur number, estPret boolean) et reactive() pour un formulaire objet avec plusieurs champs.

const { createApp, ref, reactive } = Vue; createApp({ setup() { // ref() pour les primitives const titre = ref('Mon App'); // const compteur = ref(???) // const estPret = ref(???) // reactive() pour l'objet formulaire const form = reactive({ // prenom, email, age, accepteCGU }); return { titre /*, compteur, estPret, form */ }; } }).mount('#app');

Tâche : Crée un tableau d'articles avec ref(). Ajoute une ref recherche. Définis une computed articlesFiltres qui filtre par titre selon la recherche. Tout doit réagir en temps réel.

const { createApp, ref, computed } = Vue; createApp({ setup() { const articles = ref([ { id: 1, titre: 'Introduction Vue 3', publie: true }, { id: 2, titre: 'Composition API', publie: true }, { id: 3, titre: 'React vs Vue', publie: false }, { id: 4, titre: 'JavaScript ES2024', publie: true } ]); const recherche = ref(''); // computed : filtre par publie:true ET par recherche const articlesFiltres = computed(() => { // ... }); return { articles, recherche, articlesFiltres }; } }).mount('#app');

Tâche : Crée une to-do list complète avec : ref() pour le titre, reactive() pour le formulaire d'ajout, computed() pour les tâches filtrées et le taux de complétion, watch() pour logger les changements.

const { createApp, ref, reactive, computed, watch } = Vue; createApp({ setup() { const titre = ref('Ma To-Do List'); const form = reactive({ texte: '', priorite: 'normale' }); const taches = ref([ { id: 1, texte: 'Apprendre ref()', faite: false }, { id: 2, texte: 'Pratiquer reactive', faite: false } ]); // computed : tâches filtrées, total faites, progression % // const tachesFiltrees = computed(() => ...) // const totalFaites = computed(() => ...) // const progression = computed(() => ...) // watch : log quand totalFaites change // watch(totalFaites, ...) function ajouterTache() { /* ... */ } function toggleTache(id) { /* ... */ } return { titre, form, taches, // tachesFiltrees, totalFaites, progression, ajouterTache, toggleTache }; } }).mount('#app');