He trabajado con los dos, realmente la diferencia más notable es la reutilización de código en composition API es más completa, con las composables functions, aun así todo depende del proyecto. Cabe destacar que no nos tenemos que enfrascar en una sola, en un mismo proyecto se pueden usar las dos, y pues para algunos componentes sencillos es más fácil usar options API. Es cosa de ir trabajando codeando y cada uno va buscando su sabor en VUE.
Introducción
¿Qué aprenderás en este curso?
Introducción a Vue CLI
Estructura del proyecto
Built-in Components
Componentes dinámicos
Componentes asíncronos
Transiciones
Teleports
Componentes personalizados
Virtual DOM
Entendiendo el ciclo de vida de los componentes
Explorando los primeros hooks del ciclo de vida de Vue
Mixins
Composition API
Introducción a Composition API
Ciclo de vida en Composition API
Variables reactivas con ref y reactive
Watch
Computed
Uso de props
Uso de context
Provide / Inject
Template refs
Composition vs. Options
Script setup
Cierre del curso
Hora de poner tu conocimiento en práctica
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Composition vs. Options
21/23Recursos
¿Cuál es la diferencia entre Composition API y Options API en Vue.js?
Si has estado explorando Vue.js, probablemente te hayas topado con el dilema de elegir entre Composition API y Options API. Ambas son opciones válidas, pero presentan diferencias significativas que pueden afectar la organización y desarrollo de tu aplicación. A continuación, desglosaremos estas diferencias y cómo pueden influir en tu decisión según las características de tu proyecto.
¿Cómo se estructura cada API?
Options API:
- Las configuraciones se realizan mediante un gran objeto JSON.
- Utiliza métodos específicos dentro de secciones como
methods,computed, ywatch. - La reactividad y el acceso a la instancia de Vue se gestionan con
this. - La organización del código puede requerir desplazarse entre diferentes secciones para encontrar métodos, computados y referencias.
Composition API:
- Utiliza funciones en lugar de objetos para manejar las configuraciones.
- Centraliza el código y las lógicas dentro de la función
setup. - El acceso a propiedades y a la reactividad se manejan utilizando
ref,toRefs,computed, y otras funciones reactivas. - Todo el código relacionado tiende a quedar agrupado, lo que facilita la lectura y el desarrollo.
¿Cuáles son las ventajas y desventajas de cada enfoque?
Ventajas del Options API:
- Mejor adecuación para quienes vienen de un desarrollo con JavaScript tradicional.
- Facilita la transición si has trabajado previamente con otras bibliotecas que utilizan una estructura similar.
- Organiza el código en secciones claramente definidas.
Desventajas del Options API:
- Puede volverse tedioso navegar entre secciones extensas de un componente.
- Requiere un desplazamiento vertical considerable para gestionar métodos complejos.
Ventajas del Composition API:
- Mejora la organización al permitir que todo el código relacionado permanezca junto.
- Simplifica la creación de componentes complejos al ofrecer un enfoque más funcional.
- Usa la reactividad de Vue.js de manera más natural con Vanilla JavaScript.
Desventajas del Composition API:
- Introduce un nivel de complejidad con el uso de ciertas funciones reactivas.
- Requiere una curva de aprendizaje si estás acostumbrado a una estructura más orientada a objetos.
¿Cuál debería elegir para mi proyecto?
No hay una respuesta definitiva sobre cuál API es "mejor", ya que depende del tipo de proyecto que estés desarrollando y de tus preferencias personales:
- Proyectos simples o que utilicen Vue.js como librería: Podrías beneficiarte del enfoque estructurado del Options API.
- Proyectos complejos o que integren Vue.js como framework completo: La flexibilidad y organización del Composition API podrían ser más beneficiosas.
En conclusión, ambas API proporcionan herramientas poderosas y es tu decisión elegir la que mejor se adapte a tus necesidades específicas. ¡Anímate a experimentar con ambas y descubrir cómo optimizan tu flujo de trabajo en Vue.js!
Cuéntanos en los comentarios cuál API prefieres y por qué. Tu opinión puede ser muy valiosa para otros desarrolladores que estén enfrentando la misma elección.
Aportes 16
Preguntas 2
Ordenar por:
siento que entendi en 25 % de todo este curso 😦 tocara volverlo a ver desde el principio!
no desfallecer
Para proyectos pequeños, el options es muy útil, pero a mi parecer si la idea es un proyecto escalable composition se ajusta más, pero como lo recalcan en el curso, depende de para que, es donde se toma la decisión
Composition API yo lo veo parecido a como cuando uno trabaja con react en el manejo de los componentes.
Definitivamente el codigo queda más compacto y estructurado.
Por mi parte he trabajado desde hace 4 años con React y con Vue.js y está nueva composition API definitivamente no me ha gustado, principalmente por 2 cosas:
- Se parece en gran sentido a React por lo que pierde Vue.js esta gran característica de ser diferente vs. el uso de React o incluso Angular
- Me parece más desorganizado y creo que no soy el único, aquí hay algo relacionado, y en el post dice que " … can make it difficult to refactor or improve code quality in larger scale projects. In this regard, Composition API provides better long term scalability.", No me parece que sea asi, ya que he tenido la oportunidad de trabajar en proyectos lo suficientemente grandes y ha sido mucho más escalable adicional, es más rápido incluir nuevas personas porque ya saben como está todo organizado, donde encontrar las cosas y no hay que hacerle un intro demasiado extenso para que pueda empezar a hacer cambios en el código.
optionsApi es muy usado en aplicaciones grandes tambien, es decir en proyectos hechos pej en laravel donde en el front puedes maquetar con en un archivo.blade.php y alli mismo pones tu partecita de reactividad con optionsApi
Composition API me recordó a React Hooks. No sé, lo vi parecido.
A día de hoy he hecho algunos proyectos utilizando vue 2 realmente me asusta porque no se si utilizando vue 3 me irá bien o malll. Pero así es esto, esperemos podamos dominarlo.
Pues al final el ejemplo con composition termino siendo más largo y complejo que el de options 😅, creo que a los principiantes puede hacerles más difícil la transición.
Veo muchas ventajas de composition Api, debo usarlo más para poder dominarlo. Muchas gracias por las clases!
Composition API es definitivamente más mantenible y escalable que el Options API, solo que en ciertas cosas preferería usar antes el optios que el composition. Suerte que se pueden usar los 2 en un mismo proyecto y podremos llamarlos a como nos convenga.
Me gusta bastante más composition API, se me hace mas familiar, y por mantener el código de un proyecto lo más unísono posible creo que lo mejor es elegir uno y quedarte con él.
Composition , por la similaridad que tiene con vanila JS. XD
Me sentí más cómodo utilizando esta metología.
Composition API FTW!
Siento que una de las ventajas del Composition API es la forma en como podemos organizar a nuestra manera el código, además que la escalabilidad sería mucho más sencilla teniendo en cuenta que todo se encuentra dentro de un mismo método, aunque depende del proyecto. Lo usaría más para para proyectos escalables y Options API en algo mucho más sencillo.
Excelente explicación.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?