Vue.js se ha convertido en uno de los frameworks en JavaScript más utilizados en este momento, y ahora su nueva versión (3.0) está llegando, junto con algunas novedades muy interesantes. Vamos a hablar sobre algunas de ellas en este artículo.
Composition API - La principal novedad
La principal nueva funcionalidad que se implementará en Vue 3 será la Composition API. Esta API representará y facilitará la manera de crear nuevas instancias de Vue. Estamos acostumbrados a usar las opciones o propiedades que Vue nos ofrece. Veamos algunos ejemplos:
1 - data. Propiedad que contendrá los datos del objeto.
2 - methods. Propiedad que contendrá las funciones, o métodos, que se utilizarán en la instancia de Vue.
3 - computed. Propiedad que contendrá las propiedades computadas de nuestro código.
Estas son solo algunas propiedades que Vue tiene y nos pone a disposición, y funcionan muy bien. Sin embargo, con la nueva versión de Vue, no necesitaremos declarar estas opciones, ya no serán necesarias. Tendremos solo un método dentro de la instancia de Vue, donde todo quedará almacenado.
Estamos hablando del método setup(). Este contendrá todas las variables, datos y métodos que deseamos y retornará esta información a nuestra plantilla. Nuestros métodos se crearán como funciones de hecho, lo que hará que nuestro código esté más cerca de la sintaxis nativa del lenguaje JavaScript.
El método setup() se ejecutará antes que cualquier otro, lo cual es muy interesante. Si recordamos el concepto del Ciclo de Vida de la instancia de Vue, recordaremos métodos como beforeCreate(), beforeMount() o created(). Estos métodos se ejecutan antes de que la instancia de Vue esté lista para ser utilizada en nuestro navegador. Aun así, el método setup() se ejecutará antes que todos ellos. Debido a esto, no tendrá acceso a la referencia del propio objeto, es decir, al this.
Con este cambio y la introducción de este nuevo método, Vue será aún más fácil de usar, ya que todo quedará centralizado en un solo lugar. Además, a medida que nuestra aplicación crezca, no “perderemos el control” de ella, por así decirlo, quizás confundidos con nuestro código. Con la Composition API, Vue se ha vuelto aún más robusto.
También nos ayudará en la reutilización de nuestro código. Estamos acostumbrados a usar mixins para compartir datos y funciones útiles entre los componentes. Sin embargo, con la Composition API, podremos hacer esto de manera mucho más simple, exportando e importando funciones con JavaScript nativo, de una manera mucho más fácil. Podemos decir que la Composition API también representa una evolución de los mixins.
Solo recordando un detalle importante: esta nueva API es solo una alternativa para nuestro código, pero su uso no es obligatorio. La versión 3 es compatible con las versiones anteriores de Vue, como la versión 2. Esto significa que podemos usar la sintaxis antigua y nuestro código funcionará sin problemas. Sin embargo, si usamos la nueva sintaxis, tampoco nos arrepentiremos.
Otras novedades
La Composition API es la principal novedad de la versión 3, pero no es la única. Una novedad muy interesante que podría llegar en la versión 3 de Vue es la posibilidad de usar más de un v-model en el mismo elemento. Sabemos que esta directiva solo puede aplicarse una única vez en un elemento. Sin embargo, podremos agregar esta directiva múltiples veces si lo deseamos. Será interesante analizar cómo esto afectará nuestra aplicación.
Si eres fan de TypeScript, seguro te gustará la próxima novedad, ya que en la versión 3 de Vue habrá soporte para este increíble superset de JavaScript.
También habrá la adición de algunos conceptos que nos recuerdan a una frase muy famosa asociada a Vue. ¿Has oído la frase: “Vue combina lo mejor de React y Angular”? Muchos recursos de Vue en la versión 2 ya eran similares a conceptos interesantes de React y Angular, como el Virtual DOM y la componentización. Y en la versión 3 habrá la introducción de otros recursos que ya se utilizan principalmente en React. Algunos ejemplos son los conceptos de Suspense, los Portals y los Fragments. Considero que el último mencionado es muy interesante, ya que nos ayudará a resolver un pequeño “problema” que teníamos al crear componentes: no podemos definir dos elementos raíz en un componente. Para resolver esta cuestión, generalmente agregábamos un La versión 3 de Vue aún no está disponible para que la usemos de hecho. Pero, si deseas, puedes descargar esta versión en su etapa alpha haciendo clic aquí. Puedes hacer tus pruebas y entender cómo esta nueva versión influirá en nuestros proyectos. Las novedades que analizamos juntos son muy interesantes y seguramente llevarán a Vue.js a un nuevo nivel en su estructura. La verdad es que día a día, Evan You y su equipo están haciendo de Vue un framework cada vez más fácil de implementar y simple, pero al mismo tiempo cada vez más poderoso. Nosotros en Hcode estamos muy ansiosos y emocionados por esta nueva versión, que ayudará a todos nosotros a crear aplicaciones web increíbles! Hasta el próximo artículo :)