Que buen video! Muchas gracias Pablo! Me has aclarado algunas cosas... a ver te comento hace algunas semanas inicié a aprender Vue... aún tengo un revuelto en la cabeza y más aún con las tres maneras de escribir los componentes... en el momento me siento bastante cómodo con la API de Opciones y en el momento estoy aprendiendo la API de Composición (limpia jejeje) así que me falta por ver... Como te imaginarás tengo muchísimas dudas pero quisiera aclarar algunas cosas. ¿Hay algún orden "adecuado" o "recomendado" para escribir el componente? Es decir: primero Name, luego Props, luego Methods... etc... o los puedes escribir de cualquier manera? y otra cosa que aún tengo duda es la diferencia entre computed: {} y methods: {} no sé exactamente cuándo usar una o la otra. Nuevamente agradezco tu explicación y respuesta. Un saludo!
Con la pregunta que haces al final, pienso, que te la estas contestando tu mismo. El del Composition API te evitará tener que pensar en el orden de las propiedades del Options API. Tu única labor sera crear las propiedades y funciones, en cualquier orden, y decidir que propiedades serán reactivas, y el compilador de Vue hará el resto del trabajo. Ya ni siquiera hay que exportar las propiedades y funciones para que el template tenga acceso a ellos. Pruébalo, luego no querrás volver atrás. Ah, y si vas a utilizar un gestor de estado, *Pinia* es la mejor opción. Se elimina el boilerplate de Vuex de las mutaciones y de tener que usar el método .dispatch() para llamar acciones. *(Ahora, para contestar tu pregunta respecto a methods y computed):* *methods* es una propiedad donde van todas las funciones del componente. *computed* es una propiedad donde van todos los computeds. "Computeds" son propiedades computadas, osea, getters, funciones que solo se encargan de devolver un valor luego de computar el valor. Un computed seria por ejemplo, una función que devuelve el resultado de colocar el primer caracter de una palabra en mayusculas, o el resultado de tomar una fecha y convertirla a "Hace un momento, hace 1 minuto, hace 3 meses, etc.". En el CompositionAPI, lo que iría en methods se hace declarando funciones JavaScript normalmente con "function". Y lo que iría en computed, se hace importando computed del paquete de Vue (import {computed} from 'vue' ). Así, el resultado de llamar computed se alojara en una variable (o props como se les llama en Vue).
Hola Fabio! Muchas gracias, nos alegra saber que te ha gustado el video. Respecto al orden para escribir código con la Options API, Vue tiene una guía de estilos en la que sí que recomienda un orden específico a la hora de crear componentes, por ejemplo escribir computed después de data y antes de methods. Realmente tu puedes escribirlo de la manera que quieras, pero si quieres seguir un orden Vue te recomienda uno. Con la Composition API tienes la libertad de organizarlo como tu quieras. Luego la diferencia entre computed y methods es que las computed siempre debes retornar un valor. Realmente son funciones que están pendientes de los valores que incluyes y que dependen de otros valores para usarla y retornan el valor deseado. Y los methods son funciones de JavaScript que se usan para cualquier cosa, puedes devolver un valor o simplemente realizar una acción, pero no depende de ningún valor interno para funcionar y no son reactivos a los cambios.
Hola, otra vez yo... jejeje... estuve repasando todos tus videos de Vue y de verdad qué gran contenido! Cortos y llenos de conceptos importantes. Ahora ya estoy de lleno con y de verdad que una vez lo entiendes ya no quieres volver atrás. Tengo algunas preguntas que si no es mucha molestia me gustaría que me dieras una idea. Existe la opción name: 'NombreComponente' en el ? Qué diferencia hay entre usar const props = defineProps({ tituloPropiedad: { type: String, . . } }) y solo... defineProps({ tituloPropiedad: { type: String } }) Es decir; en tener una 'const props' que almacena todas las propiedades de un componente y para usarlas tener que hacerlo "props.tituloPropiedad" en lugar de solo "tituloPropiedad"? No sé si me hice entender... hay alguna diferencia o recomendación? Muchas gracias por la ayuda!! y nuevamente que excelente material, por favor continua! Un saludo!
Hola Fabio! Me alegro que te gusten los videos 😀! En cuanto a la opción para el name, no existe una dentro del script setup y por defecto coge el name del propio componente. Si quisieras darle otro nombre distinto si que existe esta opción: export default { name: 'ComponentName', } // script setup logic Y así podrías tener script setup y un name distinto :) Luego, la diferencia entre usar la constante con las props o las props directamente es que para poder usar las props en el script setup si o si tienes que almacenarlas en una constante, sino no podrás usarlas. Si quisieras solamente usar las props en el template no necesitarías guardarlas en una constante prop. Espero que haya resuelto las dudas :)
👉 ¡En Garaje seguimos creciendo! Únete al equipo: bit.ly/talento-tech-GDI
excelente, estoy empezando en vue y me ha servido demasiado este video 💪 muchas gracias
Buen video, aunque hubiera estado bueno también ver las diferencias en las emisiones de eventos
Los mixins tambien aceptan Options API y Composition API?
Que buen video! Muchas gracias Pablo! Me has aclarado algunas cosas... a ver te comento hace algunas semanas inicié a aprender Vue... aún tengo un revuelto en la cabeza y más aún con las tres maneras de escribir los componentes... en el momento me siento bastante cómodo con la API de Opciones y en el momento estoy aprendiendo la API de Composición (limpia jejeje) así que me falta por ver... Como te imaginarás tengo muchísimas dudas pero quisiera aclarar algunas cosas. ¿Hay algún orden "adecuado" o "recomendado" para escribir el componente? Es decir: primero Name, luego Props, luego Methods... etc... o los puedes escribir de cualquier manera? y otra cosa que aún tengo duda es la diferencia entre computed: {} y methods: {} no sé exactamente cuándo usar una o la otra. Nuevamente agradezco tu explicación y respuesta. Un saludo!
Con la pregunta que haces al final, pienso, que te la estas contestando tu mismo. El del Composition API te evitará tener que pensar en el orden de las propiedades del Options API.
Tu única labor sera crear las propiedades y funciones, en cualquier orden, y decidir que propiedades serán reactivas, y el compilador de Vue hará el resto del trabajo. Ya ni siquiera hay que exportar las propiedades y funciones para que el template tenga acceso a ellos.
Pruébalo, luego no querrás volver atrás.
Ah, y si vas a utilizar un gestor de estado, *Pinia* es la mejor opción. Se elimina el boilerplate de Vuex de las mutaciones y de tener que usar el método .dispatch() para llamar acciones.
*(Ahora, para contestar tu pregunta respecto a methods y computed):*
*methods* es una propiedad donde van todas las funciones del componente.
*computed* es una propiedad donde van todos los computeds.
"Computeds" son propiedades computadas, osea, getters, funciones que solo se encargan de devolver un valor luego de computar el valor. Un computed seria por ejemplo, una función que devuelve el resultado de colocar el primer caracter de una palabra en mayusculas, o el resultado de tomar una fecha y convertirla a "Hace un momento, hace 1 minuto, hace 3 meses, etc.".
En el CompositionAPI, lo que iría en methods se hace declarando funciones JavaScript normalmente con "function".
Y lo que iría en computed, se hace importando computed del paquete de Vue (import {computed} from 'vue' ).
Así, el resultado de llamar computed se alojara en una variable (o props como se les llama en Vue).
Hola Fabio! Muchas gracias, nos alegra saber que te ha gustado el video.
Respecto al orden para escribir código con la Options API, Vue tiene una guía de estilos en la que sí que recomienda un orden específico a la hora de crear componentes, por ejemplo escribir computed después de data y antes de methods.
Realmente tu puedes escribirlo de la manera que quieras, pero si quieres seguir un orden Vue te recomienda uno.
Con la Composition API tienes la libertad de organizarlo como tu quieras.
Luego la diferencia entre computed y methods es que las computed siempre debes retornar un valor. Realmente son funciones que están pendientes de los valores que incluyes y que dependen de otros valores para usarla y retornan el valor deseado.
Y los methods son funciones de JavaScript que se usan para cualquier cosa, puedes devolver un valor o simplemente realizar una acción, pero no depende de ningún valor interno para funcionar y no son reactivos a los cambios.
Hola, otra vez yo... jejeje... estuve repasando todos tus videos de Vue y de verdad qué gran contenido! Cortos y llenos de conceptos importantes. Ahora ya estoy de lleno con y de verdad que una vez lo entiendes ya no quieres volver atrás. Tengo algunas preguntas que si no es mucha molestia me gustaría que me dieras una idea.
Existe la opción name: 'NombreComponente' en el ?
Qué diferencia hay entre usar
const props = defineProps({
tituloPropiedad: {
type: String,
.
.
}
})
y solo...
defineProps({
tituloPropiedad: {
type: String
}
})
Es decir; en tener una 'const props' que almacena todas las propiedades de un componente y para usarlas tener que hacerlo "props.tituloPropiedad" en lugar de solo "tituloPropiedad"? No sé si me hice entender...
hay alguna diferencia o recomendación?
Muchas gracias por la ayuda!! y nuevamente que excelente material, por favor continua!
Un saludo!
Hola Fabio! Me alegro que te gusten los videos 😀!
En cuanto a la opción para el name, no existe una dentro del script setup y por defecto coge el name del propio componente. Si quisieras darle otro nombre distinto si que existe esta opción:
export default {
name: 'ComponentName',
}
// script setup logic
Y así podrías tener script setup y un name distinto :)
Luego, la diferencia entre usar la constante con las props o las props directamente es que para poder usar las props en el script setup si o si tienes que almacenarlas en una constante, sino no podrás usarlas. Si quisieras solamente usar las props en el template no necesitarías guardarlas en una constante prop.
Espero que haya resuelto las dudas :)