onMounted y onBeforeMount
Acceso al DOM en onMounted y por qué onBeforeMount rara vez necesita usarse directamente.
onMounted y onBeforeMount es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. 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 4 lecciones en total.
Hooks del montaje
La fase de montaje tiene dos hooks: onBeforeMount se ejecuta justo antes de crear el DOM y onMounted justo después de insertarlo. Parecen similares, pero responden a necesidades muy diferentes.
onMounted: el DOM está listo
Cuando se ejecuta onMounted, la plantilla del componente ya se ha renderizado y está en la página. Las refs de plantilla apuntan a elementos reales, por lo que aquí es donde debe trabajar con el DOM.
<script setup>
import { ref, onMounted } from 'vue'
const box = ref(null)
onMounted(() => {
console.log(box.value.offsetWidth)
})
</script>Caso de uso: inicializar un gráfico
Las bibliotecas que dibujan en un elemento del DOM necesitan que ese elemento exista primero. Inicialícelas en onMounted, pasando el elemento de la ref.
<script setup>
import { ref, onMounted } from 'vue'
const canvas = ref(null)
onMounted(() => {
const ctx = canvas.value.getContext('2d')
// draw chart with ctx
})
</script>Caso de uso: medir el DOM
Leer tamaños, posiciones o desplazamientos requiere un DOM real. onMounted es el primer momento seguro para medir un elemento.
onMounted(() => {
const rect = box.value.getBoundingClientRect()
console.log(rect.height)
})Caso de uso: obtener datos iniciales
Obtener datos cuando aparece el componente es una tarea clásica de onMounted. Guarde el resultado en una ref para que la plantilla se actualice cuando llegue.
<script setup>
import { ref, onMounted } from 'vue'
const posts = ref([])
onMounted(async () => {
const res = await fetch('/api/posts')
posts.value = await res.json()
})
</script>onMounted se ejecuta una vez
onMounted se ejecuta una sola vez por instancia del componente. Si el componente se desmonta y se vuelve a crear más adelante, la nueva instancia ejecuta su propio onMounted.
onBeforeMount: justo antes de la inserción
onBeforeMount se ejecuta después de setup, pero antes de crear el DOM. El estado reactivo existe, pero las refs de plantilla siguen siendo null porque todavía no se ha renderizado nada.
<script setup>
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
console.log('about to render')
})
</script>Por qué onBeforeMount rara vez es necesario
La mayor parte del trabajo de configuración puede hacerse directamente en <script setup> (que ya se ejecuta antes del montaje), y todo lo relacionado con el DOM debe esperar a onMounted. Por eso onBeforeMount tiene pocos usos prácticos.
Un error común
Intentar acceder a una ref de plantilla dentro de setup o onBeforeMount devuelve null. El elemento no existe hasta que finaliza el montaje. Traslade siempre el acceso al DOM a onMounted.
<script setup>
import { ref } from 'vue'
const input = ref(null)
console.log(input.value) // null - too early!
</script>Registrar varios hooks
Puede llamar a onMounted más de una vez; todas las funciones de devolución de llamada se ejecutan en orden. Por eso los composables pueden registrar cada uno su propio onMounted de forma independiente.
onMounted(() => console.log('first'))
onMounted(() => console.log('second'))Elegir entre ellos
- onMounted: el DOM está disponible: gráficos, mediciones, enfoque y obtención de datos.
- onBeforeMount: hook previo al renderizado, sin DOM y rara vez necesario.
Comprobación rápida
Compruebe sus conocimientos sobre los hooks de montaje.
Resumen
Resumen de los hooks de montaje:
onMountedse ejecuta después de insertar el DOM; úselo para inicializar gráficos, realizar mediciones, establecer el enfoque y obtener datos iniciales.- Se ejecuta una vez por instancia y puede registrarse varias veces.
onBeforeMountse ejecuta antes del renderizado, sin acceso al DOM, y rara vez es necesario.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «onMounted y onBeforeMount» es gratis?
Sí — el texto completo de «onMounted y onBeforeMount» 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 4 lecciones en total.
¿Qué aprenderé en «onMounted y onBeforeMount»?
Acceso al DOM en onMounted y por qué onBeforeMount rara vez necesita usarse directamente. 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 4.
¿Cuánto tiempo toma la lección «onMounted y onBeforeMount»?
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
- Resumen de las fases del ciclo de vida
- onMounted y onBeforeMount
- onUpdated y onBeforeUpdate
- onUnmounted y patrones de limpieza