Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Options API: Hooks

Veamos cómo definir Hooks para nuestros componentes, usando Options API.

Uso de Hooks en la Creación de Componentes

También digamos que nosotros queremos imprimir un mensaje de "log" al inicio de la creación de nuestro componente.

Para lograr ello, tenemos que usar hooks, los cuales son bloques de código que podemos ejecutar a lo largo del ciclo de vida de nuestro componente.

El Hook "mounted"

El hook más popular y el más básico de todos es "mounted".

Así como tenemos "data" y "methods", podemos definir aquí un método "mounted" a este nivel y aquí podemos escribir cualquier código que queramos, el cual será ejecutado al inicio cuando se monte nuestro componente.

Por ejemplo, podemos poner un mensaje de "log" que diga: "El valor inicial del contador es" y aquí podemos imprimir "this.count".

Verificación en la Consola

Entonces volvemos al navegador y si presionamos F12 en Chrome y nos vamos a la pestaña de "console", vamos a ver aquí nuestro "log".

Si nosotros aumentamos el valor del contador, nuestro "log" permanece intacto.

Recordemos que nuestro "log" se está ejecutando al inicio una sola vez, cuando se monta el componente.

Diferencias con Composition API

Es importante revisar estos conceptos porque la manera en que se escriben cambia cuando usamos Composition API.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

También digamos que nosotros queremos imprimir un mensaje de "log" al inicio de la creación de nuestro componente. Para lograr ello tenemos que usar hooks, los cuales son bloques de código que podemos ejecutar a lo largo del ciclo de vida de nuestro componente. El hook más popular y el más básico de todos es "mounted". Así como tenemos “data methods”, podemos definir aquí un método "mounted" a este nivel y aquí podemos escribir cualquier código que queramos y será ejecutado al inicio cuando se monte nuestro componente. Por ejemplo, podemos poner un mensaje de "log" que diga “el valor inicial del contador es” y aquí podemos imprimir "this.count". Entonces volvemos al navegador y si presionamos F12 en Chrome y nos vamos a la pestaña de “console”, vamos a ver aquí nuestro “log”. Si nosotros aumentamos el valor, si nosotros aumentamos el valor del contador, nuestro "log" permanece intacto. Recordemos que nuestro "log" se está ejecutando al inicio una sola vez. Cuando se monta el componente es importante revisar estos conceptos porque la manera en que se escriben cambia cuando usamos Composition API.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

Introducción al curso

Probar Vue rápidamente

Crear nuevo proyecto

IDE y extensiones

Instalar Visual Studio Code