Nämä ovat kaksi tapaa kirjoittaa Vue-komponentteja. Options API järjestää koodin option-tyypin mukaan (data, methods, computed); Composition API järjestää koodin loogisen huolen mukaan käyttäen funktioita kuten , ja .
Nämä ovat kaksi tapaa kirjoittaa Vue-komponentteja. Options API järjestää koodin option-tyypin mukaan (data, methods, computed); Composition API järjestää koodin loogisen huolen mukaan käyttäen funktioita kuten , ja .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Kaikki ryhmitellään kiinteisiin kategorioihin (data, methods, computed, lifecycle). Yksinkertainen ja helposti löydettävä, mutta yhden ominaisuuden logiikka hajautuu näihin kategorioihin.
<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>
Tila, computed, metodit ja lifecycle yhdelle huolelle istuvat yhdessä, ja <script setup> tekee siitä ytimekkään (ei this, ei return).
Composition API:n avulla voit poimia ja käyttää uudelleen tilallista logiikkaa pelkkien funktioiden avulla (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>
Tämä ratkaisee logiikan uudelleenkäytön elegantisti, mikä oli kömpelöä Options API:ssa (mixinssillä oli nimeämiskollisioita ja epäselviä lähteitä).
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
Composition API (<script setup> kanssa) on suositeltu oletusarvo uusille Vue 3 -projekteille, erityisesti TypeScriptin kanssa.
Composition API on Vue 3:n vastaus komponenttilogiikan järjestämiseen ja uudelleenkäyttöön.
Ymmärtäminen siitä, että se ryhmittelee koodin ominaisuuden (ei option-tyypin) mukaan ja mahdollistaa composables-funktiot — verrattuna Options API:n option-perustaisiin kategorioihin — selittää modernin Vue-tyylin ja miksi monimutkaiset komponentit ja TypeScript-koodikannat suosivat sitä.
Molemmat ovat täysin tuettuja; voit jopa sekoittaa niitä.