Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Composition API: Hooks
Veamos cómo definir Hooks para nuestros componentes, usando Composition API.
Uso de onMounted en Vue
¿Qué pasa si de pronto queremos imprimir un mensaje de "log" de inicio cuando se monta nuestro componente?
Aquí también está disponible el Hook Mounted. Sin embargo, la sintaxis es distinta.
Vamos a usar en este caso onMounted.
Implementación de onMounted
Invocamos a onMounted y tenemos que pasar aquí una función.
Entonces aquí puede ir nuestro console.log.
El valor inicial del contador es count.value.
Guardamos, volvemos al navegador y presionamos F12. Aquí está.
El valor inicial del contador es cero.
Aquí tenemos que pasarle una función, podemos escribirlo así. O podemos usar la sintaxis de "arrow function", que es de esta manera. Al final es lo mismo. Simplemente fue para abreviar.
Recomendación para JavaScript
Puedes consultarme cualquier duda que tengas. Sin embargo, si esta sintaxis te resulta poco familiar, mi recomendación es que sigas primero mi curso de JavaScript, porque allí revisamos la sintaxis y las características que ofrece JavaScript como lenguaje.
Relación con Vue
Toda esta sintaxis que tenemos dentro de la etiqueta script, como:
- La importación de módulos
- La definición de constantes y funciones
Forma parte del lenguaje.
Lo que Vue nos aporta de manera específica son estas dos funciones: onMounted y ref, además de permitirnos definir componentes en archivos .vue.
Preguntas y soporte
De todas maneras, no te preocupes.
Si tienes dificultad, envíame tus preguntas para ayudarte de tal manera que puedas continuar con el curso.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
¿Qué pasa si de pronto queremos imprimir un mensaje de "log" inicio cuando se monta nuestro componente? Aquí también está disponible el Hook Mounted. Sin embargo, la sintaxis es distinta. Vamos a usar en este caso "onMounted". Invocamos a "onMounted" y tenemos que pasar aquí una función. Entonces aquí puede ir nuestro "console.log". El valor inicial del contador es "count.value". Guardamos, volvemos al navegador y presionamos F12. Aquí está. El valor inicial del contador es cero. Aquí tenemos que pasarle una función, podemos escribirlo así. O podemos usar la sintaxis de “arrow function” que es de esta manera. Al final es lo mismo. Simplemente fue para abreviar. Puedes consultarme cualquier duda que tengas. Sin embargo, si esta sintaxis te resulta poco familiar, mi recomendación es que sigas primero mi curso de JavaScript, porque allí revisamos la sintaxis y las características que ofrece JavaScript como lenguaje. Toda esta sintaxis que tenemos dentro de la etiqueta script como la importación de módulos, como definimos constantes, como definimos funciones, forma parte del lenguaje. Lo que Vue nos aporta de manera específica son estas dos funciones “onMounted” y “ref”, además que nos permite definir componentes en “Archivos.vue”. De todas maneras, no te preocupes, si tienes dificultad, envíame tus preguntas para ayudarte de tal manera que puedas continuar con el curso.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
28
Composition API: Hooks
30
35
38
44
48
49
56
79
81
82
84
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript