El camino hacia VueJS 3

Posted by in Javascript y TypeScript

Aunque aún no existe una versión estable de VueJS versión 3, lo cierto es que ya lleva varios meses con una beta que nos va indicando el camino hacia dónde avanza VueJS 3.

Lo mejor es pasarse por los RFC, o Request For Comments, que es dónde se pone en conocimiento de la comunidad qué implementar, qué mejorar, … Los últimos y activos los puedes encontrar aquí.

Si tuviera que describir qué aporta Vue 3, los cambios son:

Soporte a TypeScript

Lo he comentado múltiples veces, sobre todo porque tengo experiencia con TypeScript, y es todo un lujo no usarlo, porque hacer Javascript tipado es lo mejor que te puede pasar si eres desarrollador, y sobre todo, para grandes proyectos.

La compatibilidad hasta la última de las versiones 2 era bastante limitada, a pesar de que con las últimas versiones se había mejorado algo, pero aún así no era completa, y por supuesto, había también problemas con los principales plugins como Vuex o Vou-Router.

Composition API

El segundo gran cambio viene con la incorporación de Composition API, que supone un nuevo cambio a la hora de desarrollar con VueJS, permitiendo una mejor reutilización del código, y sobre todo, tenerlo todo más ordenado. El equipo de VueJS lo define tal que así:

Composition API: Son un conjunto de APIs aditivas basadas en funciones que permiten una composición flexible de la lógica de componentes

Si estás intrigado, hay un plugin composition API disponible para VueJS 2 que puede darte una buena idea de cómo cambia la programación (no lo he probado).

Yo, personalmente, no lo he probado, así que no puedo hablar de algo que no conozco …. de momento, aunque por supuesto, tendré que aprender y ver hasta que punto soy capaz de incorporar en mis desarrollos.

Hasta ahora, el desarrollo de un componente supone crear el mismo mediante data, methods y computed. La plantilla necesita saber de antemano qué propiedades tiene para poder ser representadas, que cuenta además con el problema de this, y que es vue el que se encarga de traducir a código funcional.

Composition API es la exposición de diferentes mecanismos a través de propiedades de componentes como funciones de JavaScript, que hacen que el código sea más legible y reutilizable.

Fragmentos

Esta característica se implementa con vue-fragments, y el objetivo es disponer de más de un elemento padre en un componente. Yo, personalmente no lo he utilizado porque la lógica de que un componente solo tenga un nodo de entrada me parece adecuada. En Vue 3, esta característica será nativa.

Portales

Los portales son componentes especiales pensados para ser ejecutados fuera del componente actual. O sea, componentes modales. Se ha trabajado en una mejor implementación, y que será nativa, pero que con Vue 2 puedes conseguir con el plugin portal-vue (plugin que no he utilizado nunca tampoco).

v-model múltiples

Sin duda, esta característica no la he necesitado nunca en mis desarrollos, pero si está, será por algo. Simplemente será posible incluir más de un modelo a un componente.

API para directivas personalizadas

Las directivas es una de las características de Vue que menos he explotado (me he centrado en aprender antes otras, je je!), pero parece que Vue 3 implementa un cambio para que sea más fácil e intuitiva.

Suspense

Es un nuevo componente que paraliza el renderizado de un componente hasta que se cumpla una condición, y mientras tanto, se renderiza otro.

¿Cuando llega Vue 3?

Es la gran pregunta, porque se aventura una nuevo éxito con esta versión, para ponerle las cosas aún más difíciles a otros frameworks como React o Angular.

Siento esta entrada tan teórica, pero es para poner en tu conocimiento lo que debes conocer sobre esta nueva y potente actualización de VueJS versión 3.

Happy coding!