Options API: data methods computed
Definér reaktiv data, skriv metoder, der kaldes fra templaten, og brug computed properties til afledte værdier, der opdateres automatisk.
Options API: data methods computed er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad er Options API?
Options API organiserer komponentlogik efter indstillingstype: data (reaktiv tilstand), methods (funktioner), computed (afledt tilstand), watch (sideeffekter) og livscyklus-hooks. Hver af dem placeres i en navngiven objektegenskab.
Indstillingen data
Returnerer et objekt med reaktive egenskaber. Alle egenskaber, der erklæres i data(), er reaktive — Vue observerer dem og gengiver skabelonen igen, når de ændres.
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}Indstillingen methods
Funktioner, der kan kaldes fra skabelonen eller andre methods. Inde i methods refererer this til komponentinstansen og giver adgang til data- og computed-egenskaber.
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}Indstillingen computed
Computed-egenskaber afleder værdier fra reaktive data. De er cachelagrede — de beregnes kun igen, når deres afhængigheder ændres. Brug dem i stedet for methods til afledte værdier, så du undgår unødvendige genberegninger.
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
}
}Skrivbare computed-egenskaber
En computed-egenskab kan have get og set, så den bliver skrivbar — det er nyttigt til tovejsbindinger med v-model.
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}Indstillingen watch
Overvågere udfører sideeffekter, når en reaktiv egenskab ændres. Brug dem til asynkrone operationer, der udløses af ændringer i data, f.eks. hentning, når et søgeord ændres.
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}Livscyklus-hooks i Options API
Erklær livscyklus-hooks som metoder: created, mounted, updated og unmounted. created kører, før DOM'en er klar. mounted kører, efter komponenten er tilføjet til DOM'en.
export default {
mounted() {
this.fetchData(); // runs after component is in the DOM
this.timer = setInterval(this.tick, 1000);
},
unmounted() {
clearInterval(this.timer); // cleanup
}
}Adgang fra skabelonen: $refs
Føj en ref-attribut til et skabelonelement, og få adgang til DOM-elementet eller underkomponenten via this.$refs.name i methods. Det er tilgængeligt efter montering.
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Mixins kontra Composition API
Options API har mixins til deling af logik mellem komponenter. Mixins er i vid udstrækning blevet erstattet af composables i Composition API — de er sværere at gennemskue og har problemer med navnekollisioner. Foretræk Composition API til ny kode.
Options API kontra Composition API
Options API er velegnet til små og mellemstore komponenter og er nemmere for begyndere at lære. Composition API (setup() /