Questions d'entretien Vue.js
1. Qu'est-ce que la réactivité dans Vue.js et comment fonctionne-t-elle ?
La réactivité est le mécanisme qui permet à Vue de détecter automatiquement les changements de données et de mettre à jour le DOM en conséquence. Dans Vue 3, la réactivité repose sur les Proxy JavaScript (via réactive() et ref()). Quand vous modifiez une propriété réactive, Vue detecte le changement grace au Proxy, identifie les composants qui dépendent de cette donnée et met à jour uniquement les parties du DOM affectees. C'est beaucoup plus performant que le virtual DOM diffing complet de React.
2. Quelle est la différence entre ref() et réactive() dans Vue 3 ?
ref() cree une référence réactive pour une valeur unique (primitive ou objet). On accède à la valeur via .value dans le script, mais pas dans le template. réactive() cree un objet réactif profond, sans besoin de .value. La règle générale : utilisez ref() pour les primitives et les valeurs simples, réactive() pour les objets complexes. Attention : réactive() perd sa réactivité si vous destructurez l'objet, contrairement a ref().
3. Expliquez le cycle de vie d'un composant Vue 3 avec la Composition API.
Les hooks de cycle de vie dans la Composition API sont : onBeforeMount (avant l'insertion dans le DOM), onMounted (composant insere dans le DOM, idéal pour les appels API), onBeforeUpdate (avant la mise à jour du DOM), onUpdated (après la mise à jour), onBeforeUnmount (avant la destruction, nettoyage des listeners), onUnmounted (composant detruit). Le setup() lui-meme s'execute avant le created de l'Options API.
4. Comment fonctionne la communication entre composants dans Vue ?
Props pour la communication parent vers enfant (flux unidirectionnel). Emits pour enfant vers parent (événements personnalisés). Provide/Inject pour passer des données à des composants profondement imbriqués sans prop drilling. Pinia (successeur de Vuex) pour l'état global partage entre composants non relies. Event Bus (deconseille en Vue 3, remplace par Pinia ou provide/inject).
5. Qu'est-ce que Pinia et pourquoi remplace-t-il Vuex ?
Pinia est le gestionnaire d'état officiel de Vue 3. Il remplace Vuex car il offre une API plus simple (pas de mutations, actions directes), un support TypeScript natif, une architecture modulaire (stores indépendants), et une meilleure intégration avec les DevTools Vue. Pinia supporte aussi le SSR et le hot module replacement. Chaque store Pinia définit un state, des getters et des actions, sans la complexité des modules et namespaces de Vuex.
6. Expliquez le fonctionnement des computed properties et des watchers.
Les computed sont des propriétés calculées mises en cache : elles ne se recalculent que lorsque leurs dépendances reactives changent. Elles sont idéales pour les transformations dérivées de l'état. Les watchers (watch et watchEffect) exécutent des effets de bord en réaction à des changements. Utilisez watch pour reagir à des changements spécifiques (appel API, navigation), et computed pour des valeurs dérivées (filtrage, formatage).
7. Comment gérer le routage avec Vue Router ?
Vue Router est le routeur officiel de Vue. Il supporte le mode history (URLs propres) et hash. Les fonctionnalités clés : routes dynamiques avec paramètres (:id), routes imbriquées (nested routes), navigation guards (beforeEach, beforeEnter, beforeRouteLeave), lazy loading des composants avec les imports dynamiques, et meta fields pour les métadonnées de route (authentification requise, titre de page).
8. Comment optimiser les performances d'une application Vue ?
Techniques principales : lazy loading des routes et composants (import dynamique), v-once pour le contenu statique, v-memo pour mémoriser des sous-arbres, shallowRef/shallowReactive pour les objets larges qui n'ont pas besoin de réactivité profonde, virtual scrolling pour les longues listes, code splitting avec Vite, et éviter les computed coûteux dans les templates.
9. Qu'est-ce que le Server-Side Rendering (SSR) avec Nuxt 3 ?
Nuxt 3 est le framework fullstack pour Vue 3 qui offre le SSR. Avec le SSR, le HTML est généré cote serveur à chaque requête, ce qui améliore le SEO et le temps de chargement initial. Nuxt supporte aussi le SSG (Static Site Génération) pour les sites statiques, le mode hybride (certaines pages SSR, d'autres SSG), et le ISR (Incremental Static Régénération). Nuxt fournit aussi l'auto-import des composants, le routage base sur le système de fichiers, et les composables.
10. Comment tester une application Vue efficacement ?
Utilisez Vitest comme test runner (rapide, compatible Vite). Vue Test Utils pour monter les composants et interagir avec eux (mount, shallowMount, find, trigger). Testing Library pour des tests centres sur l'utilisateur plutôt que l'implémentation. Testez les composants en isolation, mockez les stores Pinia, et utilisez Cypress ou Playwright pour les tests end-to-end.