Composition API vs Options API en Vue.js

Curso de Vue.js: Componentes y Composition API

Contenido del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

23
Qué aprendiste en el curso de Vue.js 3
01:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:26

Composition API vs Options API en Vue.js

Curso de Vue.js: Componentes y Composition API

Clase 21 de 23

Clase 21 / 23

Recursos

Si trabajas con Vue.js y dudas entre Composition API y Options API, conviene entender cómo cada una organiza el código, qué convenciones de reactividad exigen y en qué tipo de proyecto encaja mejor cada enfoque.

Ambas APIs producen el mismo resultado funcional, pero cambian radicalmente la forma en que escribes y mantienes un componente. La diferencia no está en cuántas líneas tienes, sino en cómo agrupas la lógica.

¿Cómo organiza el código cada API en Vue.js?

La Options API te obliga a separar el componente en bloques fijos: data, methods, computed, mounted, etc. Cada pieza vive en su propia opción dentro de un gran objeto JSON.

La Composition API, en cambio, agrupa todo lo relacionado con una misma funcionalidad en un mismo bloque, como si fuera Vanilla JavaScript con funciones del framework.

¿Qué es la Composition API en Vue.js? Es un estilo de escritura de componentes basado en la función setup y en funciones como ref, computed, inject o toRefs, que permite agrupar la lógica por funcionalidad en lugar de por tipo.

¿Cómo se ve un mismo componente en cada API?

En el ejemplo del componente home, escrito primero con Composition API, todo el código del botón vive junto: la declaración de la variable btn como ref, el primer console.log y el watcher. Puedes leer esa sección sin saltar a otra parte del archivo.

En Options API, ese mismo componente te obliga a:

Declarar la referencia y consumirla desde mounted con this.$refs.
Definir la función fullName dentro del bloque computed, accediendo a props con this.
Usar inject como una opción más dentro del JSON principal.
Saltar entre data, methods, computed y hooks de ciclo de vida para seguir una sola idea.

Eso significa hacer scroll constante: si una computed usa un método, bajas a methods; si un hook usa una ref del template, subes a leer el HTML.

¿Qué cambia en la reactividad entre Options y Composition?

La reactividad funciona distinto, no mejor ni peor. En Options API, una ref del template está disponible directamente en this.$refs.btn cuando el componente se monta, sin notación adicional.

En Composition API necesitas tres pasos para esa misma referencia:

Declarar la variable como ref dentro de setup.
Retornarla en el return para sincronizarla con el template.
Acceder a su contenido mediante .value.

¿Por qué hay que usar .value en Composition API? Porque ref envuelve el valor en un objeto reactivo. El .value es la convención que Vue.js usa para leer o modificar ese valor manteniendo la reactividad.

¿Cuándo conviene cada estilo?

La elección depende del tipo de proyecto que estés construyendo, no de cuál sea mejor.

Usa Options API si consumes Vue.js como librería sobre HTML plano, con objetos JSON describiendo componentes y Vanilla JavaScript alrededor.
Usa Composition API si trabajas con archivos .vue dentro de un proyecto donde Vue.js actúa como framework completo, porque la organización por funcionalidad escala mejor.
Usa la que ya domine tu equipo si el proyecto es de mantenimiento, para no mezclar estilos.

¿Qué ventajas reales aporta agrupar por funcionalidad?

Cuando todo lo del botón está en una sección y todo lo del nombre en otra, puedes enfocarte en una característica del componente sin perder contexto. Si necesitas una computed para el botón, va justo debajo de su watcher, no en un objeto computed lejano.

Incluso expose, aunque se recomienda dejarla al final porque solo se invoca una vez, puede convivir cerca de la variable que expone, como ocurre con fullName en el ejemplo. Eso reduce la fricción mental al leer el archivo.

La contraparte son las convenciones que debes recordar: declarar ref, devolverla en el return, usar .value, y respetar el orden de funciones reactivas como computed, inject o toRefs. No es complejo, pero exige disciplina.

Si vienes de React.js, muchas de estas piezas te resultarán familiares: la Composition API se acerca a la lógica de hooks, mientras que la Options API recuerda más a los componentes de clase clásicos.

¿Cuál de las dos APIs prefieres tú y por qué? Cuéntame en los comentarios qué características te gustaría profundizar de Vue.js.