# Composition API (Vue.js / Nuxt.js)

> Setup function, ref, reactive, computed, watch, lifecycle hooks, composables, script setup

- 24 questions d'entretien
- Confirmé
- [Questions d'entretien: Vue.js / Nuxt.js](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien.md)

## 1. Qu'est-ce que la Composition API dans Vue 3 ?

**Réponse**

La Composition API est une nouvelle façon d'organiser la logique des composants Vue en utilisant des fonctions de composition au lieu des options (data, methods, computed). Elle permet de regrouper la logique par fonctionnalité plutôt que par type d'option, facilitant la réutilisation du code via des composables. Elle offre aussi un meilleur support TypeScript et une meilleure organisation pour les composants complexes.

## 2. Quelle est la fonction principale utilisée dans la Composition API pour définir la logique d'un composant ?

**Réponse**

La fonction setup() est le point d'entrée de la Composition API. Elle s'exécute avant la création du composant, avant même created(). Elle reçoit les props et le contexte comme arguments et doit retourner un objet contenant les données et fonctions à exposer au template. C'est dans setup() qu'on utilise ref, reactive, computed, watch et les lifecycle hooks de la Composition API.

## 3. Quelle est la différence principale entre ref() et reactive() ?

**Réponse**

ref() crée une référence réactive pour une valeur primitive ou un objet, accessible via .value dans le script (mais auto-unwrapped dans les templates). reactive() crée un proxy réactif pour les objets et tableaux uniquement, sans nécessiter .value mais perd sa réactivité si déstructuré. ref() est plus polyvalent pour les primitives, reactive() est plus naturel pour les objets complexes mais nécessite toRef/toRefs pour la déstructuration.

## 21 questions supplémentaires disponibles

- Comment accéder à la valeur d'une ref dans la fonction setup() ?
- Comment créer une propriété calculée (computed property) dans la Composition API ?

S'inscrire gratuitement: https://sharpskill.dev/fr/login

## Autres sujets d'entretien Vue.js / Nuxt.js

- [Fondamentaux JavaScript](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/javascript-fundamentals.md): 20 questions, Junior
- [JavaScript moderne (ES6+)](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/es6-modern-javascript.md): 20 questions, Junior
- [Les bases de Vue](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/vue-basics.md): 22 questions, Junior
- [Composants Vue](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/vue-components.md): 20 questions, Junior
- [Vue Router](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/vue-router.md): 18 questions, Junior
- [Pinia State Management](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/pinia-state-management.md): 20 questions, Junior
- [Vuex (Legacy)](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/vuex-legacy.md): 15 questions, Confirmé
- [Réactivité Vue](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/vue-reactivity.md): 20 questions, Confirmé
- [Fondamentaux Nuxt](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/nuxt-fundamentals.md): 22 questions, Confirmé
- [Data Fetching Nuxt](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/nuxt-data-fetching.md): 20 questions, Confirmé
- [SSR & SSG Nuxt](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/nuxt-ssr-ssg.md): 22 questions, Confirmé
- [Server Routes Nuxt](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/nuxt-server-routes.md): 20 questions, Confirmé
- [Modules Nuxt](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/nuxt-modules.md): 18 questions, Confirmé
- [Composables Vue](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/vue-composables.md): 20 questions, Confirmé
- [Formulaires & Validation Vue](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/vue-forms-validation.md): 20 questions, Confirmé
- [Gestion d'état Nuxt](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/nuxt-state-management.md): 18 questions, Confirmé
- [Testing Vue](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/vue-testing.md): 20 questions, Confirmé
- [Déploiement Nuxt & CI/CD](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/nuxt-deployment-cicd.md): 22 questions, Confirmé
- [Performance Vue](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/vue-performance.md): 22 questions, Senior
- [Patterns avancés Vue](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/vue-advanced-patterns.md): 24 questions, Senior
- [TypeScript avec Vue](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/typescript-vue.md): 22 questions, Senior
- [Authentification Nuxt](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/nuxt-auth.md): 20 questions, Senior
- [SEO avec Nuxt](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/nuxt-seo.md): 20 questions, Senior
- [Internationalisation Nuxt](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/nuxt-i18n.md): 18 questions, Senior
- [Architecture Vue](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/vue-architecture.md): 22 questions, Senior
- [Sécurité Nuxt](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/nuxt-security.md): 20 questions, Senior
- [Écosystème Vue](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/vue-ecosystem.md): 18 questions, Senior
- [Migration Vue 2→3 & Nuxt 2→3](https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/migration-vue2-vue3-nuxt2-nuxt3.md): 22 questions, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/fr/technologies/vue-nuxt/questions-entretien/composition-api