Uso de hooks de ciclo de vida en Vue

Código
Intermedio
Vuejs
Vuejs
25 min
100 XP
Actualizado: 06/10/2024

¡Practica y certifícate!

Retroalimentación
Soluciones
Certificado
Comenzar

Descripción

Comprende el uso de hooks en Vue creando un temporizador que gestiona el ciclo de vida desde su montaje hasta su desmontaje usando la Composition API.

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.

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

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.

Solución al ejercicio

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el examen para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js
JavaScript
1 function solveChallenge ( input ) {
2 // Algoritmo optimizado O(n log n)
3 const data = parseInput ( input );
4 const sorted = data . sort (( a , b ) => a - b );
5
6 // Aplicar técnica de dos punteros
7 let left = 0 , right = sorted . length - 1 ;
8 const result = [];
9
10 while ( left < right ) {
11 const sum = sorted [ left ] + sorted [ right ];
12 if ( sum === target ) {
13 result . push ([ sorted [ left ], sorted [ right ]]);
14 left ++; right --;
15 } else if ( sum < target ) {
16 left ++;
17 } else {
18 right --;
19 }
20 }
21
22 return result ;
23 }
Código completo
Explicaciones
Mejores prácticas
+1.200 developers han resuelto este ejercicio de programación

Practica con exámenes de Vuejs

Mejora tus habilidades con cientos de exámenes de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Retroalimentación

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Únete a miles de desarrolladores mejorando sus habilidades

⭐⭐⭐⭐⭐
4.9/5 valoración