Miksi Composition API?
Options API:n rajoitukset, logiikan uudelleenkäytön ongelma, Composition API:n edut.
Miksi Composition API? on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Kaksi tapaa kirjoittaa Vue-koodia
Vue 3 tarjoaa kaksi tyyliä komponenttilogiikan kirjoittamiseen: Options API ja Composition API. Molemmilla päädytään samaan lopputulokseen, mutta ne jäsentävät koodin hyvin eri tavoin.
Kun ymmärrät näiden erot, osaat valita tilanteeseen sopivan työkalun ja lukea olemassa olevia koodikantoja varmemmin.
Miten Options API jäsentää koodin
Options API jakaa komponentin kiinteisiin osioihin: data, computed, methods, watch ja elinkaarikoukut. Kukin toiminnallisuuden osa sijaitsee eri osiossa.
Yhden pienen toiminnallisuuden takia saatat joutua käsittelemään tiedoston neljää erillistä lohkoa.
export default {
data() {
return { count: 0 }
},
computed: {
doubled() { return this.count * 2 }
},
methods: {
increment() { this.count++ }
}
}Ongelma: kokonaisuudet pirstoutuvat
Kun komponentti kasvaa, yhden toiminnallisen kokonaisuuden (esimerkiksi hakukentän) logiikka jakautuu data-, methods-, computed- ja watch-osioihin. Joudut jatkuvasti vierittämään ylös ja alas seurataksesi yhtä toiminnallisuutta.
Tätä kutsutaan pirstoutumisongelmaksi.
Composition API: ryhmittele toiminnallisuuden mukaan
Composition API:n avulla voit sijoittaa yhden loogisen kokonaisuuden kaiken koodin samaan paikkaan. Reaktiivinen tila, johdetut arvot ja niitä muuttavat funktiot ovat vierekkäin.
Luet koodia ylhäältä alas ja näet koko toiminnallisuuden yhdessä paikassa.
import { ref, computed } from 'vue'
export default {
setup() {
const count = ref(0)
const doubled = computed(() => count.value * 2)
function increment() { count.value++ }
return { count, doubled, increment }
}
}Rinnakkain
Huomaa, kuinka toisessa esimerkissä count, siitä johdettu doubled ja increment pysyvät yhdessä. Options API:ssa samat kolme osaa sijaitsivat kolmessa eri osiossa.
- Options API: järjestetty option tyypin mukaan
- Composition API: järjestetty loogisen kokonaisuuden mukaan
Logiikan uudelleenkäyttö: mixinit (vanha tapa)
Ennen Composition API:a tärkein uudelleenkäytön työkalu olivat mixinit. Mixin yhdistää omat asetuksensa komponenttiin.
Mixineissä on kuitenkin todellisia ongelmia: nimiristiriitoja, epäselviä ominaisuuksien lähteitä ja mixinien välisiä piileviä riippuvuuksia.
const counterMixin = {
data() { return { count: 0 } },
methods: { increment() { this.count++ } }
}
export default {
mixins: [counterMixin]
// Where did count come from? Not obvious.
}Logiikan uudelleenkäyttö: composable-funktiot (uusi tapa)
Composable on yksinkertaisesti funktio, joka käyttää reaktiivisuusrajapintoja ja palauttaa reaktiivisen tilan. Sitä kutsutaan kuten mitä tahansa funktiota, joten jokaisen arvon lähde on selkeästi näkyvissä.
Ei taianomaista yhdistämistä eikä piilotettuja nimiristiriitoja.
import { ref } from 'vue'
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}Composablen käyttäminen
Comablen tuominen ja kutsuminen tekee näkyväksi, että count ja increment tulevat funktiosta useCounter. Voit myös nimetä ne uudelleen destructuroinnin yhteydessä välttääksesi ristiriidat.
import { useCounter } from './useCounter'
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}Miksi composable-funktiot ovat mixinejä parempia
- Selkeät lähteet — jokainen arvo tulee näkyvästä funktiokutsusta.
- Ei nimiristiriitoja — voit destructuroida arvot ja nimetä ne vapaasti uudelleen.
- Koostettavuus — yksi composable voi kutsua toista.
- Hyvä tyyppituki — TypeScript päättelee palautettavat tyypit automaattisesti.
Parempi TypeScript-tuki ja kehitystyökalut
Koska Composition API perustuu tavallisiin funktioihin ja muuttujiin, TypeScript voi päätellä tyypit ilman erityisiä työkaluja. Ylläpidettävänä ei ole käsin tyypitettyä this-kontekstia, ja editorit tarjoavat täsmällisen automaattisen täydennyksen.
Milloin kumpaakin kannattaa käyttää
Composition API on parhaimmillaan keskikokoisissa ja suurissa komponenteissa sekä kaiken sellaisen logiikan kanssa, jota haluat käyttää uudelleen. Options API on edelleen täysin kelvollinen, ja se voi olla helposti luettava pienissä komponenteissa.
Uudessa Vue 3 -koodissa suositaan yleensä Composition API:a, erityisesti yhdessä <script setup>-syntaksin kanssa, johon tutustut pian.
Pikatarkistus
Testaa, mitä opit Composition API:n tarkoituksesta.
Kertaus
Tässä oppitunnissa opit seuraavat asiat:
- Options API järjestää koodin option tyypin mukaan, jolloin toiminnallisuus pirstoutuu eri osioihin.
- Composition API ryhmittelee koodin loogisen kokonaisuuden mukaan.
- Mixinit mahdollistavat logiikan uudelleenkäytön, mutta aiheuttavat nimiristiriitoja ja piilottavat arvojen lähteitä.
- Composables ovat tavallisia funktioita, jotka palauttavat reaktiivisen tilan — ne ovat selkeitä, ristiriidattomia ja koostettavia.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 42
- Oppitunnit
- 156
Usein kysytyt kysymykset
Onko oppitunti ”Miksi Composition API?” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Miksi Composition API?”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Miksi Composition API?”?
Options API:n rajoitukset, logiikan uudelleenkäytön ongelma, Composition API:n edut. Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Miksi Composition API?”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?
Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Miksi Composition API?
- setup()-funktio ja reaktiiviset muuttujat
- ref ja reactive: milloin kumpaakin käytetään
- Computed ja Watch Composition API:ssa