Questions d'entretien Vue.js essentielles : 25 questions pour réussir

// Exemple comparatif ref vs reactive
import { ref, reactive } from 'vue'

// ref: pour les primitives
// Nécessite .value dans le script
const count = ref(0)
count.value++ // Accès avec .value

// reactive: pour les objets complexes
// Accès direct aux propriétés
const user = reactive({
  name: 'Alice',
  age: 25
})
user.age++ // Pas de .value nécessaire

// Attention: reactive perd la réactivité si réassigné
// user = { name: 'Bob', age: 30 } // ❌ Casse la réactivité
Object.assign(user, { name: 'Bob', age: 30 }) // ✅ Correct

// Démonstration simplifiée du principe de réactivité
// Vue utilise les Proxies pour tracker les dépendances

const handler = {
  // Interception de la lecture
  get(target, key, receiver) {
    track(target, key) // Enregistre la dépendance
    return Reflect.get(target, key, receiver)
  },
  // Interception de l'écriture
  set(target, key, value, receiver) {
    const result = Reflect.set(target, key, value, receiver)
    trigger(target, key) // Déclenche les mises à jour
    return result
  }
}

// Création d'un proxy réactif
const reactiveObject = new Proxy(originalObject, handler)

// Comparaison computed vs watch
import { ref, computed, watch } from 'vue'

const firstName = ref('Jean')
const lastName = ref('Dupont')

// computed: valeur dérivée avec cache
// Se recalcule uniquement si firstName ou lastName change
const fullName = computed(() => {
  console.log('Calcul du nom complet') // Appelé une seule fois
  return `${firstName.value} ${lastName.value}`
})

// Accès multiple = une seule exécution (cache)
console.log(fullName.value) // "Jean Dupont"
console.log(fullName.value) // Pas de recalcul

// watch: effet secondaire sans cache
// Exécuté à chaque changement
watch(firstName, async (newName, oldName) => {
  // Effet secondaire: appel API
  await saveToServer({ firstName: newName })
  console.log(`Nom changé de ${oldName} à ${newName}`)
})

// Représentation conceptuelle du Virtual DOM
// Vue crée cette structure en interne

const vnode = {
  type: 'div',
  props: {
    class: 'container',
    id: 'app'
  },
  children: [
    {
      type: 'h1',
      props: {},
      children: 'Titre'
    },
    {
      type: 'p',
      props: {},
      children: 'Contenu du paragraphe'
    }
  ]
}

// Lors d'un changement, Vue compare les vnodes
// et met à jour uniquement les éléments modifiés

// Solution 1: Event Bus (petites applications)
// eventBus.js
import { ref } from 'vue'

const bus = ref(new Map())

export function useEventBus() {
  // Émettre un événement
  const emit = (event, payload) => {
    const callbacks = bus.value.get(event) || []
    callbacks.forEach(cb => cb(payload))
  }

  // Écouter un événement
  const on = (event, callback) => {
    if (!bus.value.has(event)) {
      bus.value.set(event, [])
    }
    bus.value.get(event).push(callback)
  }

  return { emit, on }
}

// Solution 2: Provide/Inject pour les composants imbriqués
// Ancêtre
import { provide, ref } from 'vue'

const sharedState = ref('valeur partagée')
provide('stateKey', sharedState)

// Descendant (n'importe quel niveau)
import { inject } from 'vue'

const state = inject('stateKey')

// Options API: code fragmenté par type
export default {
  data() {
    return {
      searchQuery: '',
      results: []
    }
  },
  computed: {
    hasResults() {
      return this.results.length > 0
    }
  },
  methods: {
    async search() {
      this.results = await fetchResults(this.searchQuery)
    }
  },
  watch: {
    searchQuery: 'search'
  }
}

// Composition API: code groupé par fonctionnalité
import { ref, computed, watch } from 'vue'

export function useSearch() {
  const searchQuery = ref('')
  const results = ref([])

  const hasResults = computed(() => results.value.length > 0)

  const search = async () => {
    results.value = await fetchResults(searchQuery.value)
  }

  watch(searchQuery, search)

  return { searchQuery, results, hasResults, search }
}

import { ref, watch } from 'vue'

// Composable pour synchroniser un état avec localStorage
export function useLocalStorage(key, defaultValue) {
  // Récupérer la valeur initiale depuis localStorage
  const storedValue = localStorage.getItem(key)
  const data = ref(
    storedValue ? JSON.parse(storedValue) : defaultValue
  )

  // Synchroniser les changements vers localStorage
  watch(
    data,
    (newValue) => {
      if (newValue === null) {
        localStorage.removeItem(key)
      } else {
        localStorage.setItem(key, JSON.stringify(newValue))
      }
    },
    { deep: true } // Observer les objets imbriqués
  )

  return data
}

// Utilisation dans un composant
const theme = useLocalStorage('theme', 'light')
const userPrefs = useLocalStorage('prefs', { notifications: true })

// Comparaison watchEffect vs watch
import { ref, watch, watchEffect } from 'vue'

const userId = ref(1)
const userData = ref(null)

// watchEffect: tracking automatique
// S'exécute immédiatement
watchEffect(async () => {
  // userId est automatiquement tracké
  const response = await fetch(`/api/users/${userId.value}`)
  userData.value = await response.json()
})

// watch: sources explicites avec anciennes valeurs
watch(userId, async (newId, oldId) => {
  console.log(`User changé de ${oldId} à ${newId}`)
  const response = await fetch(`/api/users/${newId}`)
  userData.value = await response.json()
}, {
  immediate: true // Exécuter immédiatement comme watchEffect
})

// watchEffect avec cleanup
watchEffect((onCleanup) => {
  const controller = new AbortController()

  fetch(`/api/users/${userId.value}`, {
    signal: controller.signal
  }).then(/* ... */)

  // Cleanup: annuler la requête précédente
  onCleanup(() => controller.abort())
})

<script setup lang="ts">
// Interface pour les props
interface Props {
  title: string
  count?: number
  items?: string[]
  onSubmit?: (data: FormData) => void
}

// defineProps avec typage générique
// withDefaults pour les valeurs par défaut
const props = withDefaults(defineProps<Props>(), {
  count: 0,
  items: () => [], // Factory pour les objets/tableaux
  onSubmit: undefined
})

// Les props sont automatiquement typées
console.log(props.title) // string
console.log(props.count) // number

// defineEmits avec typage
const emit = defineEmits<{
  (e: 'update', value: number): void
  (e: 'delete', id: string): void
}>()

// Utilisation typée des emits
const handleUpdate = () => {
  emit('update', props.count + 1)
}
</script>

<template>
  <div v-once>
    <!-- Ce contenu ne sera jamais re-rendu -->
    <ComplexStaticComponent />
  </div>
</template>

// 2. v-memo: mémorisation conditionnelle
<template>
  <div v-for="item in list" :key="item.id" v-memo="[item.id, item.selected]">
    <!-- Re-rendu uniquement si id ou selected change -->
    {{ item.name }}
  </div>
</template>

// 3. shallowRef/shallowReactive: réactivité superficielle
import { shallowRef, triggerRef } from 'vue'

// Ne track que le remplacement de la ref, pas les mutations internes
const largeList = shallowRef([/* milliers d'éléments */])

// Forcer la mise à jour après mutation
largeList.value.push(newItem)
triggerRef(largeList) // Déclencher manuellement le re-rendu

import { defineAsyncComponent } from 'vue'

const HeavyComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  loadingComponent: LoadingSpinner,
  delay: 200, // Délai avant d'afficher le loading
  errorComponent: ErrorDisplay,
  timeout: 3000
})

// 5. KeepAlive pour le cache des composants
<template>
  <KeepAlive :include="['Dashboard', 'UserProfile']" :max="10">
    <component :is="currentView" />
  </KeepAlive>
</template>

// Problème: fonction créée à chaque rendu
<template>
  <!-- ❌ Nouvelle fonction à chaque rendu -->
  <ChildComponent @click="() => handleClick(item.id)" />
</template>

// Solution: utiliser une méthode ou une ref
<script setup>
const handleItemClick = (id) => {
  // Logique de traitement
}
</script>

<template>
  <!-- ✅ Référence stable -->
  <ChildComponent @click="handleItemClick(item.id)" />
</template>

// Utilisation de computed pour les calculs coûteux
import { computed } from 'vue'

// ❌ Recalculé à chaque rendu
const getFilteredItems = () => {
  return items.value.filter(/* logique complexe */)
}

// ✅ Mis en cache, recalculé uniquement si items change
const filteredItems = computed(() => {
  return items.value.filter(/* logique complexe */)
})

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      // Chargement immédiat (bundle principal)
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/dashboard',
      // Chunk séparé avec nom personnalisé
      component: () => import(
        /* webpackChunkName: "dashboard" */
        '@/views/Dashboard.vue'
      ),
      // Lazy loading des routes enfants
      children: [
        {
          path: 'analytics',
          component: () => import('@/views/Analytics.vue')
        }
      ]
    },
    {
      path: '/admin',
      // Préchargement sur hover du lien
      component: () => import('@/views/Admin.vue'),
      meta: { prefetch: true }
    }
  ]
})

export default router

import { createRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = createRouter({
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      meta: { requiresAuth: true, roles: ['admin', 'user'] }
    }
  ]
})

// Guard global: vérifie l'authentification
router.beforeEach(async (to, from, next) => {
  const auth = useAuthStore()

  // Route publique
  if (!to.meta.requiresAuth) {
    return next()
  }

  // Vérifier l'authentification
  if (!auth.isAuthenticated) {
    return next({
      path: '/login',
      query: { redirect: to.fullPath }
    })
  }

  // Vérifier les rôles si spécifiés
  if (to.meta.roles && !to.meta.roles.includes(auth.user.role)) {
    return next('/unauthorized')
  }

  next()
})

// Guard au niveau du composant
export default {
  beforeRouteEnter(to, from, next) {
    // Pas accès à this ici
    next(vm => {
      // Accès à l'instance du composant via vm
      vm.loadData()
    })
  },
  beforeRouteLeave(to, from, next) {
    // Confirmer avant de quitter si formulaire modifié
    if (this.hasUnsavedChanges) {
      const answer = confirm('Quitter sans sauvegarder ?')
      next(answer)
    } else {
      next()
    }
  }
}

// Configuration des routes avec props
const routes = [
  {
    path: '/user/:id',
    component: UserProfile,
    // Mode boolean: passe les params comme props
    props: true
  },
  {
    path: '/search',
    component: SearchResults,
    // Mode fonction: transformation personnalisée
    props: (route) => ({
      query: route.query.q,
      page: parseInt(route.query.page) || 1,
      filters: route.query.filters?.split(',') || []
    })
  },
  {
    path: '/static',
    component: StaticPage,
    // Mode objet: props statiques
    props: { sidebar: true, theme: 'dark' }
  }
]

<script setup>
// Les props sont injectées automatiquement
defineProps<{
  id: string
}>()
</script>

// SearchResults.vue
<script setup>
defineProps<{
  query: string
  page: number
  filters: string[]
}>()
</script>

// Store Pinia avec Composition API
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCartStore = defineStore('cart', () => {
  // State
  const items = ref([])
  const discountCode = ref(null)

  // Getters (computed)
  const totalItems = computed(() =>
    items.value.reduce((sum, item) => sum + item.quantity, 0)
  )

  const totalPrice = computed(() => {
    const subtotal = items.value.reduce(
      (sum, item) => sum + item.price * item.quantity, 0
    )
    return discountCode.value ? subtotal * 0.9 : subtotal
  })

  // Actions (fonctions directes)
  function addItem(product) {
    const existing = items.value.find(i => i.id === product.id)
    if (existing) {
      existing.quantity++
    } else {
      items.value.push({ ...product, quantity: 1 })
    }
  }

  function removeItem(productId) {
    const index = items.value.findIndex(i => i.id === productId)
    if (index > -1) {
      items.value.splice(index, 1)
    }
  }

  async function checkout() {
    const response = await api.createOrder(items.value)
    items.value = []
    return response
  }

  return {
    items, discountCode,
    totalItems, totalPrice,
    addItem, removeItem, checkout
  }
})

import { watch } from 'vue'

export function createPersistedState(options = {}) {
  const {
    key = 'pinia',
    storage = localStorage,
    paths = null
  } = options

  return ({ store }) => {
    // Restaurer l'état au démarrage
    const savedState = storage.getItem(`${key}-${store.$id}`)
    if (savedState) {
      store.$patch(JSON.parse(savedState))
    }

    // Persister les changements
    watch(
      () => store.$state,
      (state) => {
        const toSave = paths
          ? paths.reduce((acc, path) => {
              acc[path] = state[path]
              return acc
            }, {})
          : state

        storage.setItem(
          `${key}-${store.$id}`,
          JSON.stringify(toSave)
        )
      },
      { deep: true }
    )
  }
}

// main.js
import { createPinia } from 'pinia'
import { createPersistedState } from './plugins/piniaPersistedState'

const pinia = createPinia()
pinia.use(createPersistedState({
  key: 'app-state',
  paths: ['user', 'preferences'] // Persister seulement ces clés
}))

export const AnalyticsPlugin = {
  install(app, options = {}) {
    const { trackingId, debug = false } = options

    // Injection globale disponible dans tous les composants
    const analytics = {
      trackEvent(category, action, label) {
        if (debug) {
          console.log('Analytics:', { category, action, label })
        }
        // Logique d'envoi vers le service analytics
        window.gtag?.('event', action, {
          event_category: category,
          event_label: label
        })
      },
      trackPage(path) {
        window.gtag?.('config', trackingId, { page_path: path })
      }
    }

    // Rendre disponible via inject
    app.provide('analytics', analytics)

    // Ajouter une propriété globale (déconseillé en Composition API)
    app.config.globalProperties.$analytics = analytics

    // Directive personnalisée pour le tracking au clic
    app.directive('track', {
      mounted(el, binding) {
        el.addEventListener('click', () => {
          analytics.trackEvent('click', binding.value, el.textContent)
        })
      }
    })

    // Tracking automatique des changements de route
    app.mixin({
      mounted() {
        if (this.$route) {
          analytics.trackPage(this.$route.path)
        }
      }
    })
  }
}

// main.js
import { AnalyticsPlugin } from './plugins/analyticsPlugin'

app.use(AnalyticsPlugin, {
  trackingId: 'UA-XXXXX-X',
  debug: import.meta.env.DEV
})

import { h } from 'vue'

// Composant fonctionnel avec render function
export const DynamicHeading = {
  props: {
    level: {
      type: Number,
      default: 1,
      validator: (v) => v >= 1 && v <= 6
    }
  },
  setup(props, { slots }) {
    // h() crée un vnode
    // Arguments: type, props, children
    return () => h(
      `h${props.level}`,
      { class: 'dynamic-heading' },
      slots.default?.()
    )
  }
}

// Composant avec logique conditionnelle complexe
export const ConditionalWrapper = {
  props: ['condition', 'wrapper'],
  setup(props, { slots }) {
    return () => {
      if (props.condition) {
        return h(props.wrapper, null, slots.default?.())
      }
      return slots.default?.()
    }
  }
}

// Utilisation
<DynamicHeading :level="2">Titre niveau 2</DynamicHeading>

<ConditionalWrapper :condition="isLink" wrapper="a">
  Contenu conditionnel
</ConditionalWrapper>

import { describe, it, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import Counter from '../Counter.vue'

describe('Counter', () => {
  it('affiche la valeur initiale', () => {
    const wrapper = mount(Counter, {
      props: { initialValue: 5 }
    })

    expect(wrapper.text()).toContain('5')
  })

  it('incrémente la valeur au clic', async () => {
    const wrapper = mount(Counter)

    await wrapper.find('button.increment').trigger('click')

    expect(wrapper.text()).toContain('1')
  })

  it('émet un événement lors du changement', async () => {
    const wrapper = mount(Counter)

    await wrapper.find('button.increment').trigger('click')

    expect(wrapper.emitted('change')).toBeTruthy()
    expect(wrapper.emitted('change')[0]).toEqual([1])
  })

  it('appelle le service au submit', async () => {
    const mockSubmit = vi.fn()
    const wrapper = mount(Counter, {
      global: {
        provide: {
          submitService: mockSubmit
        }
      }
    })

    await wrapper.find('form').trigger('submit')

    expect(mockSubmit).toHaveBeenCalled()
  })
})

import { createApp } from 'vue'

const app = createApp(App)

// Handler global pour les erreurs de composants
app.config.errorHandler = (err, instance, info) => {
  // err: l'erreur
  // instance: l'instance du composant
  // info: chaîne décrivant où l'erreur s'est produite

  console.error('Erreur Vue:', err)
  console.error('Composant:', instance?.$options?.name)
  console.error('Info:', info)

  // Envoyer à un service de monitoring
  errorTracker.captureException(err, {
    component: instance?.$options?.name,
    info
  })
}

// Handler pour les avertissements (dev uniquement)
app.config.warnHandler = (msg, instance, trace) => {
  console.warn('Avertissement Vue:', msg)
}

// Composant ErrorBoundary
<script setup>
import { onErrorCaptured, ref } from 'vue'

const error = ref(null)

// Capture les erreurs des composants enfants
onErrorCaptured((err, instance, info) => {
  error.value = {
    message: err.message,
    component: instance?.$options?.name,
    info
  }

  // Retourner false pour arrêter la propagation
  return false
})

const retry = () => {
  error.value = null
}
</script>

<template>
  <div v-if="error" class="error-boundary">
    <h2>Une erreur s'est produite</h2>
    <p>{{ error.message }}</p>
    <button @click="retry">Réessayer</button>
  </div>
  <slot v-else />
</template>

// Nommage des composants
// PascalCase pour les fichiers et le nom
// BaseButton.vue, AppHeader.vue, TheNavbar.vue

// Props: camelCase en JS, kebab-case en template
defineProps<{
  userName: string        // JS
  isActive: boolean       // JS
}>()

// <UserCard :user-name="name" :is-active="active" />

// Events: camelCase avec préfixe action
const emit = defineEmits<{
  (e: 'updateValue', value: string): void  // ✅
  (e: 'submit'): void                       // ✅
  (e: 'value-updated'): void               // ❌ Éviter
}>()

// Composables: préfixe use
// useAuth.js, useFetch.js, useLocalStorage.js

// Stores Pinia: préfixe use + Store suffix
// useUserStore, useCartStore, useSettingsStore

// Constantes: SCREAMING_SNAKE_CASE
const MAX_RETRY_COUNT = 3
const API_BASE_URL = '/api/v1'

src/
├── assets/              # Fichiers statiques
├── components/
│   ├── ui/              # Composants génériques (Button, Modal)
│   └── common/          # Composants métier réutilisables
├── composables/         # Logique réutilisable
│   ├── useAuth.js
│   └── useFetch.js
├── layouts/             # Layouts de page
│   ├── DefaultLayout.vue
│   └── AuthLayout.vue
├── modules/             # Modules fonctionnels
│   ├── auth/
│   │   ├── components/
│   │   ├── composables/
│   │   ├── stores/
│   │   └── views/
│   └── dashboard/
├── plugins/             # Plugins Vue
├── router/
│   ├── index.js
│   └── guards.js
├── stores/              # Stores Pinia globaux
├── types/               # Types TypeScript
├── utils/               # Utilitaires purs
└── views/               # Pages/Routes

// v-if: coût initial faible, basculement coûteux
// Retire/ajoute l'élément du DOM
// Idéal pour: conditions rarement modifiées

<template>
  <!-- v-if: le composant n'est pas créé si non admin -->
  <AdminPanel v-if="user.isAdmin" />

  <!-- v-if avec v-else-if pour les conditions multiples -->
  <LoadingSpinner v-if="isLoading" />
  <ErrorMessage v-else-if="error" :message="error" />
  <DataDisplay v-else :data="data" />
</template>

// v-show: coût initial plus élevé, basculement rapide
// Utilise display: none
// Idéal pour: basculements fréquents

<template>
  <!-- v-show: toujours rendu, toggle fréquent -->
  <Tooltip v-show="isHovered">
    Information contextuelle
  </Tooltip>

  <!-- Menu accordéon avec toggle fréquent -->
  <div v-show="isExpanded" class="accordion-content">
    {{ content }}
  </div>
</template>

// Toujours utiliser :key avec un identifiant unique stable
<template>
  <!-- ✅ Key unique et stable -->
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>

  <!-- ❌ Index comme key (problèmes de réordonnancement) -->
  <li v-for="(item, index) in items" :key="index">
    {{ item.name }}
  </li>
</template>

// Filtrage et tri: utiliser computed
<script setup>
import { computed } from 'vue'

const sortedAndFilteredItems = computed(() => {
  return items.value
    .filter(item => item.isActive)
    .sort((a, b) => a.name.localeCompare(b.name))
})
</script>

// Virtualisation pour les très longues listes
<script setup>
import { useVirtualList } from '@vueuse/core'

const { list, containerProps, wrapperProps } = useVirtualList(
  largeList,
  { itemHeight: 50 }
)
</script>

<template>
  <div v-bind="containerProps" style="height: 400px; overflow: auto">
    <div v-bind="wrapperProps">
      <div v-for="item in list" :key="item.data.id">
        {{ item.data.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const x = ref(0)
const y = ref(0)

const updatePosition = (event) => {
  x.value = event.clientX
  y.value = event.clientY
}

onMounted(() => {
  window.addEventListener('mousemove', updatePosition)
})

onUnmounted(() => {
  window.removeEventListener('mousemove', updatePosition)
})

// Exposer l'état via le slot
defineExpose({ x, y })
</script>

<template>
  <!-- Slot avec props: le parent décide du rendu -->
  <slot :x="x" :y="y" />
</template>

// Utilisation: contrôle total sur le rendu
<template>
  <MouseTracker v-slot="{ x, y }">
    <div class="cursor-display">
      Position: {{ x }}, {{ y }}
    </div>
  </MouseTracker>

  <MouseTracker v-slot="{ x, y }">
    <svg>
      <circle :cx="x" :cy="y" r="10" fill="red" />
    </svg>
  </MouseTracker>
</template>