Options API: data, methods ja computed
Määritä reaktiivista dataa, kirjoita templaten kutsumia metodeja ja käytä computed-ominaisuuksia automaattisesti päivittyville johdetuille arvoille
Options API: data, methods ja computed on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mikä on Options API?
Options API järjestää komponentin logiikan asetustyypin mukaan: data (reaktiivinen tila), methods (funktiot), computed (johdettu tila), watch (sivuvaikutukset) ja elinkaarikoukut. Kukin määritetään nimettynä objektiominaisuutena.
data-asetus
Palauttaa reaktiivisia ominaisuuksia sisältävän objektin. Kaikki data()-funktiossa määritetyt ominaisuudet ovat reaktiivisia — Vue tarkkailee niitä ja hahmontaa mallipohjan uudelleen, kun niiden arvot muuttuvat.
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}methods-asetus
Funktioita, joita voidaan kutsua mallipohjasta tai muista metodeista. Metodien sisällä this viittaa komponentti-instanssiin ja tarjoaa pääsyn data- ja computed-ominaisuuksiin.
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}computed-asetus
Computed-ominaisuudet johtavat arvoja reaktiivisesta datasta. Niiden arvot tallennetaan välimuistiin — ne lasketaan uudelleen vain, kun niiden riippuvuudet muuttuvat. Käyttäkää niitä metodien sijaan johdettuihin arvoihin, jotta vältätte tarpeettoman uudelleenlaskennan.
export default {
data() {
return { items: [], tax: 0.2 };
},
computed: {
itemCount() { return this.items.length; },
subtotal() { return this.items.reduce((sum, i) => sum + i.price, 0); },
total() { return this.subtotal * (1 + this.tax); } // uses another computed
}
}Kirjoitettavat computed-ominaisuudet
Computed-ominaisuudelle voidaan määrittää get ja set, jolloin siitä tulee kirjoitettava — tämä on hyödyllistä kaksisuuntaisissa sidonnoissa, joissa käytetään v-modelia.
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}watch-asetus
Watcherit suorittavat sivuvaikutuksia, kun reaktiivinen ominaisuus muuttuu. Käyttäkää niitä datan muutosten käynnistämiin asynkronisiin toimintoihin, kuten hakemiseen hakutermin muuttuessa.
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}Options APIn elinkaarikoukut
Elinkaarikoukut määritetään metodeina: created, mounted, updated ja unmounted. created suoritetaan ennen kuin DOM on valmis. mounted suoritetaan sen jälkeen, kun komponentti on lisätty DOMiin.
export default {
mounted() {
this.fetchData(); // runs after component is in the DOM
this.timer = setInterval(this.tick, 1000);
},
unmounted() {
clearInterval(this.timer); // cleanup
}
}Mallipohjasta käyttäminen: $refs
Lisätkää mallipohjan elementtiin ref-attribuutti ja käyttäkää DOM-elementtiä tai lapsikomponenttia metodeissa kohteen this.$refs.name kautta. Se on käytettävissä mountauksen jälkeen.
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Mixin-komponentit ja Composition API
Options API sisältää mixinit logiikan jakamiseen komponenttien välillä. Composition APIn composable-funktiot ovat suurelta osin korvanneet mixinit — mixineja on vaikeampi hahmottaa, ja niihin liittyy nimiavaruuksien yhteentörmäyksiä. Uudessa koodissa kannattaa suosia Composition APIa.
Options API vai Composition API
Options API sopii hyvin pienille ja keskisuurille komponenteille, ja aloittelijoiden on helpompi oppia se. Composition API (setup() /