¡Vue 3 RC!
El día 17 de Julio de 2020 fue liberada la primera RC (Release Candidate) de Vue 3, una gran noticia para todos los desarrolladores de Vuejs. Esto significa que ya tenemos algo estable para entender cómo funcionará la nueva versión de Vuejs.
Como ya hemos comentado en el curso introductorio de Vue con su API de Composición, esta nueva versión tiene una cosa que es muy buena, y es que, a diferencia de Frameworks como Angular donde en cada versión hay cambios realmente importantes que hacen que tu código deje de trabajar, en Vue eso no sucede, mira lo que ellos dicen en su proceso de migración:
Es fantástico saber que en el proceso de crear una nueva versión de software para un Framework lo primero ha tener en cuenta haya sido al desarrollador. Esto es sin duda lo que más aprecio de Vuejs y el motivo de que finalmente descartara otros Frameworks como Angular para mi desarrollo.
Para ver que realmente prácticamente nada ha cambiado, vamos a crear un proyecto con Vue 3 utilizando Vite y así le echamos un ojo al código. Primer proyecto con Vue 3 y Vite Para crear un proyecto con Vue 3 y Vite simplemente debemos ejecutar el siguiente comando:
¡Brutal! Seguimos manteniendo la misma estructura de directorios, mismos archivos y, si yo no te digo que esto es Vue 3, estoy seguro que de un vistazo tú no te habrías dado cuenta de que esta es la nueva versión de Vue, ni tú ni nadie. Diferencias entre Vue 2 y Vue 3 Empecemos por el archivo principal de un proyecto Vue, el archivo main.js, primero el de Vue 2 y después el de Vue 3:
En Vue 3, en lugar de importar Vue para crear nuestra APP, simplemente deberemos importar createApp de vue, nada más.
Diferencias en el archivo App.vue entre Vue 2 y Vue 3:
Una de las principales diferencias en las templates entre Vue 2 y Vue 3 es que en la nueva versión podemos tener múltiples elementos root en lugar de un único contenedor cómo sucedía en Vue 2. En este caso en concreto sin duda es la única diferencia entre las 2 versiones :)
Diferencias en el archivo HelloWorld.vue entre Vue 2 y Vue 3:
Y volvemos de nuevo a ver que el código es exactamente igual a diferencia de la template, la cual en Vue 3 cómo ya hemos comentado permite múltiples elementos root.
Algo a tener en cuenta en Vue 3 es que a partir de ahora data siempre debe ser una función que retorne un objeto, algo que no es así en Vue 2, donde tenemos varias opciones para definir data.
En las próximas entradas estaremos viendo las novedades de Vue 3 a través de ejemplos, mientras tanto no te pierdas los cursos de Vue 2 y Vue 3 de la plataforma.