Hooks de cycle de vie et récupération des données
Récupérez les données au moment approprié du cycle de vie du composant
Hooks de cycle de vie et récupération des données est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 3 leçons au total.
Quand récupérer les données
Les composants ont un cycle de vie : ils sont créés, montés dans le DOM, mis à jour, puis finalement démontés. Savoir quel crochet du cycle de vie utiliser pour récupérer les données permet de conserver une application réactive et fiable.
Le crochet created
Le crochet created s'exécute une fois les données réactives configurées, mais avant l'insertion du composant dans le DOM. C'est un bon endroit pour commencer à récupérer des données, car la réactivité fonctionne déjà.
export default {
data() {
return { posts: [] }
},
created() {
this.fetchPosts()
}
}Le crochet mounted
Le crochet mounted s'exécute après l'insertion du composant dans le DOM. Utilisez-le lorsque votre logique de récupération doit accéder aux éléments du DOM ou à des bibliothèques tierces qui nécessitent un élément rendu.
export default {
mounted() {
this.fetchPosts()
// template refs are now available here
}
}created ou mounted
Pour une simple récupération de données, les deux conviennent. created s'exécute légèrement plus tôt, la requête démarre donc plus vite. Choisissez mounted uniquement si vous avez réellement besoin du DOM rendu. Pour la plupart des appels d'API, les deux conviennent.
onMounted dans l'API de composition
Dans l'API de composition, les crochets du cycle de vie sont des fonctions importées et appelées dans setup. L'équivalent de mounted est onMounted.
import { ref, onMounted } from "vue"
import { api } from "./api"
export default {
setup() {
const posts = ref([])
onMounted(async () => {
const res = await api.get("/posts")
posts.value = res.data
})
return { posts }
}
}Le modèle d'état de chargement
Les requêtes réseau prennent du temps. Suivez un indicateur loading pour afficher un indicateur de chargement pendant l'arrivée des données et le masquer une fois l'opération terminée.
data() {
return {
posts: [],
loading: false
}
}Activer et désactiver le chargement
Définissez loading sur true avant la requête, puis de nouveau sur false après celle-ci, quel que soit son résultat.
async fetchPosts() {
this.loading = true
try {
const res = await api.get("/posts")
this.posts = res.data
} finally {
this.loading = false
}
}Afficher un indicateur de chargement
Dans le modèle, utilisez l'indicateur de chargement pour afficher un indicateur ou un message pendant l'arrivée des données.
<template>
<p v-if="loading">Loading...</p>
<ul v-else>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</template>Gérer les résultats vides
Prévoyez toujours le cas d'une réponse vide. Affichez un message convivial lorsque la liste récupérée ne contient aucun élément.
<ul v-if="posts.length">
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
<p v-else>No posts found.</p>Modèle de chargement avec l'API de composition
Le même modèle de chargement s'adapte naturellement à l'API de composition avec des références réactives.
const posts = ref([])
const loading = ref(false)
async function load() {
loading.value = true
try {
posts.value = (await api.get("/posts")).data
} finally {
loading.value = false
}
}
onMounted(load)Afficher les données récupérées
Une fois les données placées dans l'état réactif, le modèle les affiche automatiquement. Combinez les états de chargement, de données et de liste vide pour offrir une expérience utilisateur soignée.
<template>
<section>
<p v-if="loading">Loading...</p>
<ul v-else-if="posts.length">
<li v-for="p in posts" :key="p.id">{{ p.title }}</li>
</ul>
<p v-else>Nothing here yet.</p>
</section>
</template>Vérification rapide
Vérifiez vos connaissances sur les crochets du cycle de vie et la récupération de données.
Récapitulatif
Récupérez les données dans created ou mounted (ou dans onMounted avec l'API de composition). Suivez un indicateur loading avec try/finally afin que l'interface puisse afficher un indicateur de chargement, rendre les données et gérer les résultats vides. Vous allez maintenant rendre ces requêtes plus robustes en gérant les erreurs et en utilisant des intercepteurs.
Questions Fréquemment Posées
La leçon « Hooks de cycle de vie et récupération des données » est-elle gratuite ?
Oui — le texte complet de « Hooks de cycle de vie et récupération des données » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Hooks de cycle de vie et récupération des données » ?
Récupérez les données au moment approprié du cycle de vie du composant Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 3.
Combien de temps prend la leçon « Hooks de cycle de vie et récupération des données » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Requêtes HTTP avec Axios
- Hooks de cycle de vie et récupération des données
- Gestion des erreurs et intercepteurs globaux