Ahora que Vue 3 es la versión por defecto, finalmente podremos comenzar a utilizar la nueva Composition API en producción. Muchas personas ya lo están haciendo, y aunque todavía hay mucho código por actualizar de muchas librerías, ha llegado el momento de hacer nuestra parte y actualizarnos también.
Es por eso que en este artículo te traigo los principales cambios de Composition API respecto al Options API, que es el API original de Vue, y te cuento cómo puedes aprovechar esta nueva sintaxis para sacarle el mayor provecho a este fabuloso framework. ✌
Para comenzar, es importante aclarar que Composition API es completamente opcional y siempre podrás seguir usando Options API, como ha sido costumbre, excepto por algunos cambios de los que hablaremos más adelante.
Es crucial que sepas que todo lo que ya conoces sobre Vue sigue siendo válido. Lo único que nos trae Composition API son nuevas funcionalidades que nos permitirán escribir un código más elegante y reutilizable.
Vamos a comenzar con un ejemplo de código.
Este es un “hola mundo” utilizando Options API de la versión dos de Vue.
Se trata de un botón sobre el que puedes hacer click, y cada vez que lo haces, incrementa el contador de clicks, que a su vez se muestra en el texto del botón.
// Counter.vue
<template><button @click="increment">{{ counter }}</button></template><script>exportdefault {
data() {
return {
counter: 0,
};
},
methods: {
increment() {
this.counter++;
}
}
};
</script>Cómo puedes ver, en primer lugar tenemos un template con su respectivo botón; el event handler para el evento click, que hace uso del método increment y luego aprovecha la interpolación de textos para mostrar el contador.
Luego, en la sección del script, podemos encontrar la ya característica estructura de objeto JSON de configuración, que exportamos por medio de un export default.
Dentro del código del componente está la función data, la cual retorna el estado interno del componente, con la variable counter en este caso. Posteriormente, encuentras el objeto methods con el método increment realizando un incremento en uno, de la variable counter.
Esto último es importante, ya que puedes observar cómo tenemos una estructura bien definida y muy específica, impuesta por el framework, al organizar nuestro código.
Observa cómo todas las variables, como counter, tendrían que estar siempre dentro de la función data, y todos los métodos tendrían que estar dentro del objeto methods, y así pasaría con todas las otras options que nos ofrece el Options API, eso puede hacer que haya mucha imposición de sintaxis por parte del framework, en el código de los componentes.
Ahora veamos una segunda versión utilizando la nueva Composition API:
// Counter.vue
<template>
<button @click="increment">
{{ counter }}
</button>
</template>
<script setup>
import { ref } from"vue";
const counter = ref(0);
const increment = () => counter.value++;
</script>
En este segundo ejemplo de código puedes ver cómo se transforma la sintaxis de objeto, en algo más parecido a vanilla JS, código limpio, dónde solo tienes un import, una constante y una función.
¡Casi pareciera que no estamos utilizando un framework! 😮
Puedes notar que la sintaxis que nos obligaba a colocar las variables en una parte y los métodos en otra, ha desaparecido. Ahora podríamos tener múltiples variables y funciones a lo largo de todo el archivo, organizadas más bien en función de su utilidad.
También puedes notar que en lugar de utilizar la función data, ahora únicamente necesitamos llamar a la función ref para crear una variable reactiva, misma que podemos mutar por medio de su value (esto es necesario para mantener la reactividad funcionando).
De esta manera, el código se ha hecho más simple y mejor organizado.
Cabe destacar que la variable counter y la función increment podrían provenir de algún otro archivo de JS y serían igualmente utilizables, por lo tanto, ahora podríamos importarlas desde múltiples componentes, haciéndolas reutilizables sin necesidad de alguna sintaxis adicional, ocasionando que los mixins de la segunda versión sean completamente innecesarios.
Y esto es solamente el principio. De la misma forma que ahora podemos escribir nuestras variables y métodos en Composition API, también existen nuevas formas de usar los hooks del ciclo de vida y todas las demás funcionalidades de Vue.
Piensa, por ejemplo, en el hook updated, en Options API, este hook sería una función llamada update en el objeto de configuración del componente, pero, en Composition API, es una función que puedes importar desde Vue y utilizar cómo cualquier otra.
Aunque, en el caso de los hooks de ciclo de vida, tenemos la sintaxis onX, es decir, nuestros hooks comenzarán con “on” más el nombre del hook (siempre con su primera letra en mayúsculas).
Por lo tanto, para reemplazar el option updated, haríamos uso de la función onUpdated, de la siguiente manera:
import { onUpdated } from "vue";
onUpdated(() => {
/* el código a ejecutar */
});
En resumen, algunas ventajas de Composition API son:
Cómo mencioné al inicio, todavía será posible emplear el Options API, excepto en ciertas funcionalidades que ya no son necesarias o que ya de por sí estaban marcadas como obsoletas para el cambio de versión. Algunas de estas funcionalidades son:
Para más información sobre todos los cambios que podrían romper la compatibilidad, puedes acceder al sitio de guía de migración.
Sin embargo, todo esto es solo el comienzo. La nueva sintaxis de Composition API nos abre las puertas a un nuevo universo de posibilidades, tanto en cómo estructuramos nuestros componentes, como en la manera en que va a funcionar todo en el ecosistema, de aquí en adelante.
Reiterando lo mencionado previamente, ha llegado la hora de actualizarnos y comenzar a aprender, para sacarle el máximo potencial a este increíble framework.
Después de todo, gracias a los nuevos cambios, ¡el futuro de Vue será sorprendente!
¿Quieres continuar aprendiendo sobre Composition API?
Te espero en el Curso de Vue.js: Componentes y Composition API nos vemos en clases. 💫
I can’t live without my script setup
Muy buena explicación, he comprendido las diferencias que existen entre las dos APIS. Gracias Prof!