Cuenta atrás con Vuejs 2

Vamos a ver lo sencillo que es crear una cuenta atrás con Vuejs 2 utilizando las funciones setInterval y clearInterval de Javascript junto con MomentJS.

Nosotros lo vamos a hacer por fases para tratar de explicarlo todo detalladamente, pero antes de comenzar, y para hacerlo más sencillo, vamos a instalar moment.

yarn add moment

Lo primero será crear el componente CountDown.vue para añadir el siguiente código.

• props: Definimos seconds, será los segundos que tendrá la cuenta regresiva.
• data (): inicializamos algunos datos.
• mounted (): establecemos los datos al inicio del componente con datos válidos.

• _setInterval (): definimos un intervalo que se ejecutará cada segundo para actualizar la cuenta regresiva, asociándola a interval podremos cancelar el intervalo con clearInterval cuando queramos.
• this._setInterval(): hacemos la llamada a _setInterval en el hook mounted.

• destroyed (): en el momento en el que el componente sea destruido eliminamos el intervalo para que no siga trabajando de fondo.

Con todo lo anterior ya tendríamos el componente CountDown listo para utilizar, así que el siguiente código será 100% funcional desde cualquier otro componente.

Con este último trozo de código ya tendríamos lista una cuenta atrás con Vuejs 2 completamente funcional, fíjate que le pasamos los segundos para que sea más dinámica.