Questi sono due modi per scrivere componenti Vue. La Options API organizza il codice per tipo di opzione (data, methods, computed); la Composition API organizza il codice per preoccupazione logica usando funzioni come , e .
Questi sono due modi per scrivere componenti Vue. La Options API organizza il codice per tipo di opzione (data, methods, computed); la Composition API organizza il codice per preoccupazione logica usando funzioni come , e .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Tutto è raggruppato in contenitori fissi (data, methods, computed, lifecycle). Semplice e individuabile, ma la logica di una singola funzionalità è sparsa in questi contenitori.
<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>
Lo stato, computed, methods, e lifecycle per una preoccupazione stanno insieme, e <script setup> lo rende conciso (niente this, niente return).
La Composition API ti permette di estrarre e riutilizzare la logica con stato come funzioni semplici (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>
Questo risolve chiaramente il riutilizzo della logica, che era scomodo nella Options API (i mixin avevano collisioni di nomi e fonti poco chiare).
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 (con <script setup>) è il default consigliato per i nuovi progetti Vue 3, specialmente con TypeScript.
La Composition API è la risposta di Vue 3 per organizzare e riutilizzare la logica dei componenti.
Comprendere che raggruppa il codice per funzionalità (non per tipo di opzione) e abilita composables — rispetto ai contenitori basati su opzioni della Options API — spiega lo stile Vue moderno e perché i componenti complessi e le basi di codice TypeScript lo preferiscono.
Entrambe sono completamente supportate; puoi persino mischiarle.