Ejercicio de programación con Vuejs: Uso de hooks de ciclo de vida en Vue

Código
Puntuación
0h 25m

Vuejs: Aprende a manejar ciclos de vida con hooks en Composition API creando un temporizador con TypeScript en un reto práctico, de manera dinámica y fácil.

Este reto de programación en Vuejs se centra en la comprensión y aplicación de los hooks de ciclo de vida utilizando la Composition API

Se requiere crear un componente cuyo script gestione un temporizador que cuente los segundos de forma precisa desde que el componente se monta hasta su desmontaje. 

Al implementar este ejercicio, serás guiado a través del uso de onMounted para iniciar el temporizador y onUnmounted para detenerlo, asegurando la correcta limpieza de recursos para evitar posibles fugas de memoria. El objetivo es escribir el script de un componente Vue que registra en la consola cada segundo transcurrido y detiene el contador adecuadamente cuando el componente se desmonta, mostrando un mensaje en la consola. 

Se espera que desarrolles el componente en un archivo independiente usando TypeScript, sin necesidad de configurar un entorno completo de Vue. Este reto no solo pone a prueba tu destreza en la composición y reactividad de Vue, sino que también refuerza tus habilidades prácticas para manejar efectivamente el ciclo de vida del componente.

Crea solamente el script de un componente Vue utilizando la Composition API que gestione un temporizador que cuente los segundos desde que el componente se monta hasta que se desmonta. Utiliza los hooks onMounted y onUnmounted para manejar el inicio y la limpieza del temporizador.

Requisitos

  1. Al montar el componente, inicia un temporizador que incremente un contador de segundos cada segundo.
  2. Muestra el contador de segundos en la consola cada vez que se actualice.
  3. Al desmontar el componente, detén el temporizador y muestra un mensaje en la consola indicando que el componente ha sido desmontado.
  4. Utiliza correctamente los hooks onMounted y onUnmounted para gestionar el ciclo de vida del componente.

Consideraciones

  • El componente debe estar desarrollado en un único archivo con TypeScript.
  • No se requiere un entorno de desarrollo completo de Vue.
  • Asegúrate de que el temporizador se detenga correctamente para evitar fugas de memoria.
Empezar ejercicio de programación

Todos los ejercicios de programación de Vuejs

Evalúa tus conocimientos con ejercicios de programación en Vuejs de tipo Test, Puzzle, Código y Proyecto con VSCode.

Certificados de superación de Vuejs

Supera todos los retos de Vuejs y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.

Tutorial para resolver este ejercicio de programación

Vue.js

Vuejs

Ciclo de vida con Composition API

Composición y reactividad

Otros tutoriales de programación con Vuejs