Hooks de ciclo de vida y obtención de datos
Obtenga datos en el momento adecuado del ciclo de vida del componente
Hooks de ciclo de vida y obtención de datos es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.
Cuándo obtener datos
Los componentes tienen un ciclo de vida: se crean, se montan en el DOM, se actualizan y finalmente se desmontan. Saber qué hook del ciclo de vida debe utilizar para obtener datos ayuda a mantener la aplicación receptiva y correcta.
El hook created
El hook created se ejecuta después de configurar los datos reactivos, pero antes de insertar el componente en el DOM. Es un buen lugar para empezar a obtener datos porque la reactividad ya está disponible.
export default {
data() {
return { posts: [] }
},
created() {
this.fetchPosts()
}
}El hook mounted
El hook mounted se ejecuta después de insertar el componente en el DOM. Úselo cuando la lógica para obtener datos necesite acceder a elementos del DOM o a bibliotecas de terceros que requieran un elemento renderizado.
export default {
mounted() {
this.fetchPosts()
// template refs are now available here
}
}created frente a mounted
Para obtener datos sin más, ambas opciones funcionan. created se ejecuta un poco antes, por lo que la solicitud comienza antes. Elija mounted solo cuando realmente necesite el DOM renderizado. Para la mayoría de las llamadas a una API, cualquiera de las dos opciones es adecuada.
onMounted en la Composition API
En la Composition API, los hooks del ciclo de vida son funciones importadas que se llaman dentro de setup. El equivalente de mounted es 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 }
}
}El patrón del estado de carga
Las solicitudes de red tardan un tiempo. Realice un seguimiento de un indicador loading para mostrar un indicador de carga mientras llegan los datos y ocultarlo cuando terminen.
data() {
return {
posts: [],
loading: false
}
}Alternar el estado de carga
Establezca loading en true antes de la solicitud y de nuevo en false después, independientemente del resultado.
async fetchPosts() {
this.loading = true
try {
const res = await api.get("/posts")
this.posts = res.data
} finally {
this.loading = false
}
}Mostrar un indicador de carga
En la plantilla, utilice el indicador de carga para mostrar un indicador o un mensaje mientras llegan los datos.
<template>
<p v-if="loading">Loading...</p>
<ul v-else>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</template>Gestionar resultados vacíos
Planifique siempre la posibilidad de recibir una respuesta vacía. Muestre un mensaje claro cuando la lista obtenida no contenga ningún elemento.
<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>Patrón de carga con la Composition API
El mismo patrón de carga se adapta fácilmente a la Composition API mediante refs.
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)Mostrar los datos obtenidos
Una vez que los datos se encuentran en un estado reactivo, la plantilla los renderiza automáticamente. Combine los estados de carga, de datos y vacío para ofrecer una experiencia de usuario cuidada.
<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>Comprobación rápida
Compruebe sus conocimientos sobre los hooks del ciclo de vida y la obtención de datos.
Repaso
Obtenga datos en created o mounted (o en onMounted con la Composition API). Realice un seguimiento de un indicador loading mediante try/finally para que la interfaz pueda mostrar un indicador de carga, renderizar los datos y gestionar los resultados vacíos. A continuación, hará que estas solicitudes sean más robustas mediante la gestión de errores y el uso de interceptores.
Preguntas frecuentes
¿La lección «Hooks de ciclo de vida y obtención de datos» es gratis?
Sí — el texto completo de «Hooks de ciclo de vida y obtención de datos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Hooks de ciclo de vida y obtención de datos»?
Obtenga datos en el momento adecuado del ciclo de vida del componente Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.
¿Cuánto tiempo toma la lección «Hooks de ciclo de vida y obtención de datos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Peticiones HTTP con Axios
- Hooks de ciclo de vida y obtención de datos
- Gestión de errores e interceptores globales