No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Options API vs. Composition API

20/37
Recursos

Aportes 11

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

En Vue 3 se introduce la Composition API, una nueva forma alternativa de escribir código en Vue.
La Composition API está diseñada para mejorar sustancialmente la capacidad de crecimiento de un proyecto, así como facilitar la reutilización de componentes.

La modalidad Options API nos permite trabajar mediante opciones en un objeto de Vue. La información está separada por nombre de estructuras, de modo que la curva de aprendizaje es muy sencilla y agradable, y resulta muy apropiado para usuarios que comienzan a trabajar con frameworks:

Por otro lado, la Composition API, en lugar de separar la información en opciones, utiliza un método especial (hook) llamado setup() donde podremos escribir nuestro código Javascript de inicialización del componente. Dicho hook devolverá un object con los elementos que queramos utilizar en el resto del componente.

Para que se entienda mejor:
.
Options API: Es básicamente tener todo el código en el mismo componente, vas poniendo tus métodos, tus propiedades computadas y demás, y en cada uno se van mezclando las funcionalidades independientes de la aplicación, algo así:


const app = createApp({

	data(){
		return {
			// Toda la data de unas 100 lineas de código
		}
	},

	methods: {
	
		unMetodo(){},

		otroMetodo(){},

		// 50 Métodos más		

	},

	computed: {
	
		unaComputed(){},

		otraComputed(){},

		// 50 computeds más		

	}

});

Como pueden ver el código empieza a crecer, imaginemos que queremos ver cuál es la propiedad que queremos usar dentro de mi computed número 25, tendría que hacer un scroll enorme y comerme esos 50 métodos que están arriba para llegar hasta las propiedades (por eso se dice que están separados), en estos casos es mejor usar Composition API.
.
Composition API: Básicamente aquí tenemos ya nuestras funciones juntas, en lugar de tenerlas separados, es decir, poner las variables en data, poner los métodos y todo separado, con Composition API podemos tenerlas juntasdentro deuna misma función, esta documentación oficial de Vue lo explica perfectamente:
.
https://v3.vuejs.org/guide/composition-api-introduction.html#standalone-computed-properties

Reflexión:
Cuando estamos construyendo una aplicación donde la segmentamos en múltiples partes o interfaces, las conocemos como componentes.
Por sí solo, el llevar la aplicación a este concepto, nos permite la facilidad de mantenimiento y, sobre todo, flexibilidad para la escalabilidad. Sin embargo, esa misma magnitud que convierte al proyecto, tendríamos cada vez más muchos componentes evitando que Vue, sea progresivo.
Ahí es donde se nos apoyamos de esta Compoistion API

para una persona que inicia con Vue, es mejor usar Option API o comenzar con la Composition API?tomando en cuenta que sea el mismo tipo de proyecto(tamano)

Ya me dio hambre por hablar de tanta comida jajajaj, excelente

en proyectos con vue cli, vi que usaba options api es extenso cuando tienes muchos metodos, objetos,etc por ello composition api parece una buena opción.

La composición API proporciona una forma funcional y reutilizable de organizar su código, mientras que options API proporciona un enfoque tradicional orientado a objetos.
Me di cuenta que he estado haciendo muchas cosas al revés. Excelente clase y explicación con Ratatouille!
  • Options API: es propio de vue2 y es compatible con vue3. La sintaxis de esta forma de trabajo puede ser mas extensa en cuanto a legibilidad de codigo.

  • Composition API: Es la nueva forma de trabajar que se propuso con vue3. Una de sus ventajas es que se escriben menos lineas de codigo y utilizando composables se puede reutilizar logica en diversos componentes.

Un concepto nuevo para mi, se ve chevere y me parece una forma excelente de organizar codigo!

Options API
Objeto de opciones para ocnfigurar nuestra aplicacion o componente
*ventajas:
Es muy facil para iniciar y crear cosas simples
Composition API
Funcionalidad interna para componer y organizar para caracteristicas (features)