Questions d'entretien Vue.js
1. Qu'est-ce que la reactivite dans Vue.js et comment fonctionne-t-elle ?
La reactivite est le mecanisme qui permet a Vue de detecter automatiquement les changements de donnees et de mettre a jour le DOM en consequence. Dans Vue 3, la reactivite repose sur les Proxy JavaScript (via reactive() et ref()). Quand vous modifiez une propriete reactive, Vue detecte le changement grace au Proxy, identifie les composants qui dependent de cette donnee et met a jour uniquement les parties du DOM affectees. C'est beaucoup plus performant que le virtual DOM diffing complet de React.
2. Quelle est la difference entre ref() et reactive() dans Vue 3 ?
ref() cree une reference reactive pour une valeur unique (primitive ou objet). On accede a la valeur via .value dans le script, mais pas dans le template. reactive() cree un objet reactif profond, sans besoin de .value. La regle generale : utilisez ref() pour les primitives et les valeurs simples, reactive() pour les objets complexes. Attention : reactive() perd sa reactivite 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, ideal pour les appels API), onBeforeUpdate (avant la mise a jour du DOM), onUpdated (apres la mise a 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 (evenements personnalises). Provide/Inject pour passer des donnees a des composants profondement imbriques sans prop drilling. Pinia (successeur de Vuex) pour l'etat 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'etat 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 independants), et une meilleure integration avec les DevTools Vue. Pinia supporte aussi le SSR et le hot module replacement. Chaque store Pinia definit un state, des getters et des actions, sans la complexite des modules et namespaces de Vuex.
6. Expliquez le fonctionnement des computed properties et des watchers.
Les computed sont des proprietes calculees mises en cache : elles ne se recalculent que lorsque leurs dependances reactives changent. Elles sont ideales pour les transformations derivees de l'etat. Les watchers (watch et watchEffect) executent des effets de bord en reaction a des changements. Utilisez watch pour reagir a des changements specifiques (appel API, navigation), et computed pour des valeurs derivees (filtrage, formatage).
7. Comment gerer le routage avec Vue Router ?
Vue Router est le routeur officiel de Vue. Il supporte le mode history (URLs propres) et hash. Les fonctionnalites cles : routes dynamiques avec parametres (:id), routes imbriquees (nested routes), navigation guards (beforeEach, beforeEnter, beforeRouteLeave), lazy loading des composants avec les imports dynamiques, et meta fields pour les metadonnees 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 memoriser des sous-arbres, shallowRef/shallowReactive pour les objets larges qui n'ont pas besoin de reactivite profonde, virtual scrolling pour les longues listes, code splitting avec Vite, et eviter les computed couteux 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 genere cote serveur a chaque requete, ce qui ameliore le SEO et le temps de chargement initial. Nuxt supporte aussi le SSG (Static Site Generation) pour les sites statiques, le mode hybride (certaines pages SSR, d'autres SSG), et le ISR (Incremental Static Regeneration). Nuxt fournit aussi l'auto-import des composants, le routage base sur le systeme 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 plutot que l'implementation. Testez les composants en isolation, mockez les stores Pinia, et utilisez Cypress ou Playwright pour les tests end-to-end.