Question 1

Quelle est la principale différence entre var et let en JavaScript ?

Accepted Answer

La différence fondamentale réside dans la portée des variables. let a une portée de bloc, ce qui signifie qu'une variable déclarée avec let n'existe que dans le bloc où elle est définie (entre accolades). var a une portée de fonction, ce qui peut causer des comportements inattendus car la variable est accessible en dehors du bloc. Cette différence de portée fait de let le choix recommandé pour éviter les bugs liés au hoisting et à la portée.

Question 2

Qu'est-ce qu'une Promise en JavaScript ?

Accepted Answer

Une Promise est un objet représentant l'achèvement ou l'échec éventuel d'une opération asynchrone. Elle permet de gérer des opérations qui prennent du temps (requêtes HTTP, lectures de fichiers) sans bloquer l'exécution du code. Une Promise peut avoir trois états : pending (en attente), fulfilled (résolue avec succès) ou rejected (échouée avec une erreur).

Question 3

Qu'est-ce qu'une instance Vue ?

Accepted Answer

Une instance Vue est l'objet créé en appelant createApp() qui représente l'application. Cet objet racine contient toutes les données réactives, les méthodes, et les options de configuration. Il sert de point d'entrée pour monter l'application sur un élément DOM et initialiser le système de réactivité de Vue.

Question 4

Qu'est-ce qu'un composant Vue ?

Accepted Answer

Un composant Vue est une instance Vue réutilisable avec un nom. Il encapsule HTML, CSS et JavaScript dans une unité logique indépendante. Les composants permettent de diviser l'interface utilisateur en morceaux réutilisables et maintenables. Chaque composant possède son propre template, sa logique et ses styles, facilitant ainsi l'organisation du code et la réutilisabilité.

Question 5

Quelle est la structure minimale requise pour une application Nuxt 3 ?

Accepted Answer

Une application Nuxt 3 nécessite uniquement un fichier app.vue ou un dossier pages/ à la racine du projet. Si app.vue est présent sans dossier pages/, Nuxt crée une application sans router Vue Router. Si pages/ existe, Nuxt active automatiquement le routing basé sur les fichiers et nécessite <NuxtPage /> dans app.vue pour afficher les routes.

Question 6

Quelle est la différence principale entre useFetch et useAsyncData dans Nuxt ?

Accepted Answer

useFetch est un wrapper autour de useAsyncData et $fetch qui simplifie les appels API courants. Il gère automatiquement la construction de l'URL et accepte directement une URL comme premier argument, tandis que useAsyncData nécessite une clé unique et une fonction fetcher personnalisée. Utiliser useFetch pour les appels API simples, useAsyncData pour des logiques de fetching complexes.

Question 7

Qu'est-ce que le Server-Side Rendering (SSR) dans Nuxt ?

Accepted Answer

Le SSR génère le HTML complet sur le serveur à chaque requête, puis l'envoie au client. Cela améliore le SEO car les moteurs de recherche reçoivent du contenu HTML immédiatement accessible, et améliore également le temps de premier affichage. Le SSR est le mode de rendu par défaut dans Nuxt 3, contrairement au rendu côté client où le JavaScript génère le contenu dans le navigateur.

Question 8

Qu'est-ce que le Virtual DOM dans Vue ?

Accepted Answer

Le Virtual DOM est une représentation JavaScript légère de l'arbre DOM réel. Vue utilise le Virtual DOM pour minimiser les manipulations directes du DOM, qui sont coûteuses en performance. Lors d'un changement d'état, Vue crée un nouveau Virtual DOM, le compare avec l'ancien (algorithme de diff), puis applique uniquement les modifications nécessaires au DOM réel. Cette approche réduit considérablement le nombre d'opérations DOM et améliore les performances, surtout pour les applications complexes avec de nombreuses mises à jour.

Question 9

Quel est le rôle principal de provide/inject dans Vue 3 ?

Accepted Answer

Provide/inject permet de transmettre des données d'un composant parent à n'importe quel composant descendant sans passer par les props à chaque niveau intermédiaire. Cela évite le 'props drilling' où il faut passer des props à travers plusieurs niveaux de composants qui n'en ont pas besoin. Particulièrement utile pour partager des données globales comme la configuration d'un thème ou l'état d'authentification.

Question 10

Quel est le rôle principal de defineComponent dans Vue 3 avec TypeScript ?

Accepted Answer

defineComponent permet d'activer l'inférence de types TypeScript pour les options du composant. Sans cette fonction, le contexte this serait traité comme any dans les Options API. Elle assure que les props, data, computed et méthodes sont correctement typées automatiquement.

Questions d'entretien Vue.js / Nuxt.js

Prêt pour ton entretien Vue.js / Nuxt.js ?

Explorer tous les sujets Vue.js / Nuxt.js

Fondamentaux JavaScript

JavaScript moderne (ES6+)

Les bases de Vue

Composants Vue

Vue Router

Pinia State Management

Vuex (Legacy)

Composition API

Réactivité Vue

Fondamentaux Nuxt

Data Fetching Nuxt

SSR & SSG Nuxt

Server Routes Nuxt

Modules Nuxt

Composables Vue

Formulaires & Validation Vue

Gestion d'état Nuxt

Testing Vue

Déploiement Nuxt & CI/CD

Performance Vue

Patterns avancés Vue

TypeScript avec Vue

Authentification Nuxt

SEO avec Nuxt

Internationalisation Nuxt

Architecture Vue

Sécurité Nuxt

Écosystème Vue

Migration Vue 2→3 & Nuxt 2→3

Maîtrise Vue.js / Nuxt.js pour ton prochain entretien