API Options : data, methods et computed
Définissez des données réactives, écrivez des méthodes appelées depuis le template et utilisez des propriétés calculées pour les valeurs dérivées qui se mettent à jour automatiquement.
API Options : data, methods et computed est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu’est-ce que l’API Options ?
L’API Options organise la logique d’un composant par type d’option : data (état réactif), methods (fonctions), computed (état dérivé), watch (effets secondaires) et hooks du cycle de vie. Chaque élément est placé dans une propriété d’objet nommée.
L’option data
Renvoie un objet de propriétés réactives. Toutes les propriétés déclarées dans data() sont réactives : Vue les observe et réaffiche le template lorsqu’elles changent.
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}L’option methods
Fonctions pouvant être appelées depuis le template ou d’autres méthodes. Dans les méthodes, this désigne l’instance du composant et permet d’accéder aux propriétés data et computed.
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}L’option computed
Les propriétés computed dérivent des valeurs à partir de données réactives. Elles sont mises en cache : elles ne sont recalculées que lorsque leurs dépendances changent. Utilisez-les plutôt que des méthodes pour les valeurs dérivées afin d’éviter les recalculs inutiles.
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
}
}Propriétés computed modifiables
Une propriété computed peut comporter get et set pour être modifiable, ce qui est utile pour les liaisons bidirectionnelles avec v-model.
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}L’option watch
Les observateurs exécutent des effets secondaires lorsqu’une propriété réactive change. Utilisez-les pour les opérations asynchrones déclenchées par des changements de données, par exemple pour récupérer des données lorsqu’un terme de recherche change.
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}Hooks du cycle de vie avec l’API Options
Déclarez les hooks du cycle de vie sous forme de méthodes : created, mounted, updated, unmounted. created s’exécute avant que le DOM soit prêt. mounted s’exécute une fois le composant présent dans le DOM.
export default {
mounted() {
this.fetchData(); // runs after component is in the DOM
this.timer = setInterval(this.tick, 1000);
},
unmounted() {
clearInterval(this.timer); // cleanup
}
}Accès au template : $refs
Ajoutez un attribut ref à un élément du template, puis accédez à l’élément DOM ou au composant enfant via this.$refs.name dans les méthodes. Cet accès est disponible après le montage.
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Mixins et API Composition
L’API Options propose des mixins pour partager la logique entre les composants. Dans l’API Composition, les mixins sont largement remplacés par des composables : ils sont plus difficiles à comprendre et peuvent provoquer des collisions de noms. Préférez l’API Composition pour tout nouveau code.
API Options ou API Composition
L’API Options convient très bien aux composants petits ou moyens et est plus facile à apprendre pour les débutants. L’API Composition (setup() /