Ce sont deux façons d'écrire des composants Vue. L'Options API organise le code par type d'option (data, methods, computed) ; la Composition API organise le code par préoccupation logique en utilisant des fonctions comme , et .
Ce sont deux façons d'écrire des composants Vue. L'Options API organise le code par type d'option (data, methods, computed) ; la Composition API organise le code par préoccupation logique en utilisant des fonctions comme , et .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Tout est regroupé en buckets fixes (data, methods, computed, lifecycle). C'est simple et facile à découvrir, mais la logique d'une seule feature se retrouve éparpillée dans ces buckets.
<script setup>
import { ref, computed, onMounted } from "vue";
// all the logic for "counter" lives together
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() { count.value++; }
onMounted(() => console.log("mounted"));
</script>
L'état, computed, methods, et lifecycle pour une même préoccupation se trouvent ensemble, et <script setup> rend cela concis (pas de this, pas de return).
La Composition API vous permet d'extraire et réutiliser la logique avec état en tant que simples fonctions (composables) :
// useCounter.js — reusable across any component
export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
<script setup>
const { count, increment } = useCounter(); // reuse anywhere
</script>
Cela résout proprement la réutilisation de logique, ce qui était maladroit dans l'Options API (les mixins créaient des collisions de noms et des sources peu claires).
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
La Composition API (avec <script setup>) est l'approche recommandée par défaut pour les nouveaux projets Vue 3, particulièrement avec TypeScript.
La Composition API est la réponse de Vue 3 pour organiser et réutiliser la logique des composants.
Comprendre qu'elle regroupe le code par feature (et non par type d'option) et qu'elle active les composables — contrairement aux buckets basés sur les options de l'Options API — explique le style Vue moderne et pourquoi les composants complexes et les bases de code TypeScript la privilégient.
Les deux sont entièrement supportées ; vous pouvez même les mélanger.
Une bibliothèque de questions d'entretien IT avec des réponses détaillées — du Junior au Senior.
Faire un don