Options API: data, methods e computed
Definire dati reattivi, scrivere metodi chiamati dal template e usare proprietà computed per valori derivati che si aggiornano automaticamente.
Options API: data, methods e computed è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Cos'è l'Options API
L'Options API organizza la logica dei componenti in base al tipo di opzione: data (stato reattivo), methods (funzioni), computed (stato derivato), watch (effetti collaterali), hook del ciclo di vita. Ognuna viene inserita in una proprietà di un oggetto con nome.
L'opzione data
Restituisce un oggetto contenente proprietà reattive. Tutte le proprietà dichiarate in data() sono reattive: Vue le osserva e riesegue il rendering del template quando cambiano.
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}L'opzione methods
Funzioni che possono essere chiamate dal template o da altri metodi. All'interno dei metodi, this fa riferimento all'istanza del componente e consente di accedere alle proprietà data e computed.
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}L'opzione computed
Le proprietà computed derivano valori dai dati reattivi. Sono memorizzate nella cache: vengono ricalcolate solo quando cambiano le relative dipendenze. Le utilizzi al posto dei metodi per i valori derivati, così da evitare ricalcoli non necessari.
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
}
}Proprietà computed scrivibili
Una computed può avere get e set per diventare scrivibile, una caratteristica utile per i binding bidirezionali con v-model.
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}L'opzione watch
I watcher eseguono effetti collaterali quando cambia una proprietà reattiva. Li utilizzi per operazioni asincrone attivate dai cambiamenti dei dati, ad esempio per recuperare dati quando cambia un termine di ricerca.
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}Hook del ciclo di vita nell'Options API
Dichiari gli hook del ciclo di vita come metodi: created, mounted, updated, unmounted. created viene eseguito prima che il DOM sia pronto. mounted viene eseguito dopo che il componente è stato inserito nel DOM.
export default {
mounted() {
this.fetchData(); // runs after component is in the DOM
this.timer = setInterval(this.tick, 1000);
},
unmounted() {
clearInterval(this.timer); // cleanup
}
}Accesso dal template: $refs
Aggiunga un attributo ref a un elemento del template e acceda all'elemento DOM o al componente figlio tramite this.$refs.name nei metodi. Disponibile dopo il montaggio.
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Mixins e Composition API
L'Options API dispone dei mixin per condividere la logica tra i componenti. Nella Composition API, i mixin sono stati in gran parte sostituiti dai composable: sono più difficili da analizzare e possono causare conflitti tra i nomi. Per il nuovo codice, preferisca la Composition API.
Options API o Composition API
L'Options API è ideale per componenti piccoli o medi ed è più facile da imparare per chi è agli inizi. La Composition API (setup() /