¿Qué hay de nuevo en Vue 3?

Vue es un marco Javascript progresivo para crear aplicaciones de interfaz de usuario y de una sola página. Es un marco Model-View-ViewModel (MVVM) de código abierto. El marco central se centra principalmente en la capa de vista y se puede integrar fácilmente con otras bibliotecas y proyectos. Usando herramientas modernas y bibliotecas de soporte, las aplicaciones de una sola página (SPA) se pueden manejar fácilmente.

Vue 3: Vue 3 va a ser un hito en el mundo del desarrollo web moderno como desarrollador de JavaScript. Vue.js 3.0 se lanzó el 22 de julio como Release Candidate y trae consigo muchas características nuevas e interesantes. La API y las implementaciones son estables ahora. Próximamente será lanzado oficialmente.

Vue 3 es más pequeño, más rápido, más fácil de mantener, equipado con una mejor compatibilidad con TypeScript y más fácil de usar como destino nativo.

Características: Algunas características nuevas de Vue 3 que lo hacen más conveniente para su uso son:

    • Mejora del rendimiento

    • API de composición

    • Portal

    • Múltiples componentes raíz

    • TypeScript

Mejora del rendimiento:

• Más pequeño: Vue 3 es más pequeño. Es amigable con el movimiento de árboles, lo que significa que solo permite importar las piezas de la biblioteca que se necesitan, y se elimina el código innecesario. El tiempo de ejecución principal se ha reducido a ~12kb, comprimido con gzip.
• Más rápido: Vue 3 es más rápido. El DOM virtual (Modelo de objeto de documento) se ha reescrito desde cero con un nuevo algoritmo de diferenciación para que sea más rápido en el montaje, la aplicación de parches y el tiempo de renderizado.

API de composición: es una de las mejores características de Vue 3. La API de composición estaba disponible como un complemento en Vue2, pero se integrará en Vue 3. Actualmente, construimos componentes con la API de opciones, que hizo componentes grandes. difíciles de mantener y administrar. 

Según el equipo central de Vue, la API de composición es « un conjunto de API aditivas basadas en funciones que permiten la composición flexible de la lógica de los componentes « . Permite una mejor organización y reutilización del código.

Portal: Teleport o Portal es una nueva función que nos permite representar la parte del código de un componente a otro componente en un árbol DOM diferente. Es una de las características que ya está implementada (de forma nativa) en React. Usando portales, podemos manejar fácilmente los modales, las ventanas emergentes y los componentes que aparecen en la parte superior de la página. Podemos aliviarnos del uso desagradable de z-index, que usamos para evitar la anulación de CSS de los componentes del host. 

La característica del portal estaba presente como una biblioteca de terceros en Vue 2, pero ahora será una característica incorporada y se puede usar usando la etiqueta <Teleport>

Múltiples componentes raíz: por ahora, las plantillas de Vue pueden tener una sola etiqueta, es decir, un elemento raíz. Incluso si queremos dos etiquetas <p> como etiquetas hermanas, debemos encerrarlas dentro de una etiqueta <div>. Pero, en Vue 3, esta restricción se elimina y no hay necesidad de usar el elemento raíz. Ahora podemos usar tantas etiquetas de hermanos como queramos dentro de la etiqueta <template>.

TypeScript: Vue comenzó a admitir TypeScript en las últimas versiones 2.0 y continúa en Vue 3 también. El código fuente de Vue 3 está completamente escrito en TypeScript, por lo que la API de composición obtiene soporte mejorado. Pero también, es opcional.

Además de todas estas características principales, Vue 3 también cubre muchas mejoras más pequeñas. Muchas características que estaban disponibles como bibliotecas de terceros ahora se incluyen en el núcleo del marco de trabajo de Vue 3. Está repleto de muchas características nuevas y sorprendentes. Con todas estas características interesantes, el rendimiento se ajusta y la experiencia del desarrollador se vuelve más simple y mejor.