Ez két módja a Vue komponensek írásának. Az Options API a kódot opció típus szerint szervezi (data, methods, computed); a Composition API a kódot logikai szempont szerint szervezi olyan függvények használatával, mint a , és .
Ez két módja a Vue komponensek írásának. Az Options API a kódot opció típus szerint szervezi (data, methods, computed); a Composition API a kódot logikai szempont szerint szervezi olyan függvények használatával, mint a , és .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Minden rögzített szekciókba van csoportosítva (data, methods, computed, lifecycle). Egyszerű és könnyen felfedezzük, de egy funkció logikája szétszóródik ezekben a szekciókban.
<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>
Az állapot, computed, metódusok és lifecycle egy szempont esetén együtt vannak, és a <script setup> tömör (nincs this, nincs return).
A Composition API lehetővé teszi a állapotfüggő logika kinyerését és újrafelhasználását egyszerű függvényekként (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>
Ez tisztán megoldja a logika-újrafelhasználás problémáját, ami az Options API-ban nehézkes volt (mixins-ek névütközésekhez és tisztázatlan forrásokhoz vezettek).
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
A Composition API (a <script setup> segítségével) az ajánlott alapértelmezett megoldás az új Vue 3 projektek számára, különösen a TypeScript-tel.
A Composition API a Vue 3-nak a komponenslogika szervezésére és újrafelhasználására adott válasza.
Annak megértése, hogy a kódot funkció szerint csoportosítja (nem opció típus szerint), és lehetővé teszi a composables-t — a Options API opció alapú szekciójával szemben — magyarázza a modern Vue stílust és azt, hogy az összetett komponensek és a TypeScript kódbázisok miért részesítik előnyben.
Mindkettő teljes mértékben támogatott; még keverhetőek is.