Table of Contents
En este artículo, asumimos que conoces los fundamentos de Vue 3. En el artículo citado, se explican los principales cambios de Vue 2 a Vue 3 , así como las bases para entender cómo funciona la API de composición. Este último sería el tema principal de este artículo: API de composición de Vue 3.
Vue 3 APIs
El cambio de Vue 2 a Vue 3 ofrece varias opciones a los desarrolladores a la hora de montar la lógica de un componente. Podemos seguir usando la Options API como veníamos haciendo en Vue 2 o bien usar Composition API.
Ventajas de Composition API
La ventaja principal es la capacidad de extraer la lógica y poder reusarla en distintos componentes, haciendo nuestro código más modular y fácil de mantener. Así que evitamos tener que utilizar los mixins, que era la forma de reutilizar lógica en Vue2.
Si seguimos hablando de la organización, en Options API, si exploramos nuestro componente, nos daremos cuenta de que cada el componente se encarga de muchas responsabilidades que serán forzadas a dividirse en diferentes partes del código. Eso nos fuerza a desplazarnos arriba y abajo si el fichero tiene cientos de líneas, complicándonos más de lo que debería. Por tanto, si intentamos extraer la lógica en partes reusables, aunque pueda suponer un poco más de trabajo, veremos que el resultado es mucho más limpio y ordenado, podemos verlo en la siguiente imagen:
Otra ventaja importante es que nos permite la programación funcional, a diferencia de la Options API que es object oriented.
El código escrito usando Composition API es más eficiente y minificable que el código con Options API,por tanto el tamano del bundle será menor. Esto es así porque el template en nuestro <script setup> es compilado como una inline function dentro del mismo ámbito del código. A diferencia de la propiedad this el código compilado puede acceder directamente a las variables sin un proxy de por medio. Por esto nos ayuda a tener menos peso al poder tener unos nombres de variables simplificados.
La nueva API te permite sacar todo el jugo de Javascript al definir el comportamiento de nuestro componente, async/await, promises, y nos facilita el uso librería de terceros como RxJS, entre otros.
Desventajas de Composition API
La principal desventaja es que obliga a los desarrolladores a aprender una nueva sintaxis y forma de organizar el código. Esto puede tener una curva de aprendizaje para los que están acostumbrados a Options API. Aun así, está diseñada para que sea simple y fácil de aprender, así que la curva debe ser rápida.
Primeros pasos
Template:
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>Options API:
<script>
export default {
// Properties returned from data() become reactive state
// and will be exposed on `this`.
data() {
return {
count: 0
}
},
// Methods are functions that mutate state and trigger updates.
// They can be bound as event listeners in templates.
methods: {
increment() {
this.count++
}
},
// Lifecycle hooks are called at different stages
// of a component's lifecycle.
// This function will be called when the component is mounted.
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>Composition API:
<script setup>
import { ref, onMounted } from 'vue'
const count = ref(0)
const increment = () => {
count.value++
}
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>Comparación con React Hooks
Comparando con React Hooks, la lógica es la misma, pero con algunas diferencias.
React Hooks:
- Los hooks son invocados cada vez que hay una actualización del componente.
- Las variables declaradas en un cierre de un
hookpueden volverse obsoletas si no se le pasan las dependencias correctas. - Los cálculos pesados deben usar
useMemoel cual nos requerirá que le pasemos las dependencias manualmente. - Los
event handlerspasados a componentes secundarios provocan actualizaciones de código innecesarias de forma predeterminada. Descuidar esto nos provoca una actualización excesiva afectando al rendimiento casi sin darnos cuenta
Vue Composition API:
- El codigo de
setup()o<script setup>se invoca solo una vez. - El sistema de reactividad de Vue en
runtimerecupera las dependencias reactivas, así no necesitamos declararlas manualmente. - No se necesita controlar manualmente las funciones de
callbackpara actualizar los componentes secundarios. Vue nos asegura que los componentes solo se actualizan cuando realmente es necesario.
Dicho esto, los react hooks fueron la mayor fuente de inspiración para crear Composition API, pero intentando solucionar los problemas mencionados anteriormente.
Preguntas frecuentes
¿Será deprecada Options API?
No, no está planificado, es parte de Vue y hay muchos desarrolladores que les encanta. A parte, muchos de los beneficios de la Composition API solo se pueden notar en proyectos grandes, así que Options API sigue siendo una buena decisión para proyectos pequeños y medianos.
¿Puedo usar ambas APIs juntas?
Yes, you can use Composition API using the setup() method in the Options API. However, it is recommended only if you have your code in Options API and you need to integrate some library written in Composition API.
¿Composition API es compatible con Vue2?
No, you must upgrade your project Vue 3 in order to use the Composition API.
Conclusión
En conclusión, las 2 apis son válidas para la lógica de un componente Vue. La Composition API nos ofrece una forma funcional y reusable para organizar nuestro código, mientras que Options API nos ofrece la tradicional solución: Object oriented. Aún así si lo que quieres es mejor rendimiento, mayor legibilidad del código y estás en un proyecto grande, tu opción debería ser Composition API.
