Descubre las nuevas características que Vue 3 tiene para ti


Guadalupe

08 May 2023

¿Estás llevando cursos de JavaScript? Entonces, ¡este artículo es para ti! Vue 3, la última versión del popular framework JavaScript para construir interfaces de usuario, se lanzó oficialmente en septiembre de 2020.

Con el lanzamiento de Vue 3, los desarrolladores pueden esperar una serie de nuevas características y mejoras que les ayudarán a crear aplicaciones más potentes y eficientes. A continuación, te explicaremos más de cerca algunas de las nuevas características más interesantes de Vue 3. ¡Comencemos!

¿Por qué es importante la actualización de Vue?

Si nos fijamos en la trayectoria de Vue hasta ahora, ha pasado de ser una biblioteca a ser un framework, lo que lo ha hecho mucho más potente pero manteniendo su naturaleza ligera. Con el núcleo lanzando una nueva versión mayor, todas las demás partes del framework necesitaban avanzar juntas.

En resumen, Vue 3 será la nueva versión por defecto. Vue 2 permanecerá en la versión LTS (soporte a largo plazo) durante 18 meses, lo que significa que seguirá recibiendo actualizaciones de seguridad y es absolutamente seguro seguir con este durante un tiempo.

Pero, ¿no es un buen momento para que migremos nuestros proyectos existentes, si los hay? Vue 3 es más rápido, más pequeño, más mantenible y es más fácil apuntar a nativo. Uno de los cambios más significativos de Vue 3 es la introducción de la API de composición. Esta nueva API permite a los desarrolladores escribir componentes utilizando una sintaxis más basada en funciones, en contraposición a la sintaxis tradicional orientada a objetos utilizada en Vue 2.

Esto puede hacer que el código sea más fácil de razonar. Asimismo, puede hacer que el código sea más fácil de razonar y reutilizar, así como permitir una composición más flexible de la lógica de los componentes.

Te puede interesar: Conoce la actualización de Laravel con Vite

¿Por qué usar Vue 3?

codersfree-persona-usando-vue-3

Como mencionamos, Vue 3 es más rápido, más pequeño, más mantenible y es más fácil apuntar a nativo. La mejora de tamaño se consigue gracias a la combinación de una mayor modularidad del código, un núcleo más pequeño en tiempo de ejecución y un compilador amigable con los árboles. Así, el nuevo núcleo se reduciría de unos 20KB a 10KB gzipped.

El compilador generará código respetuoso con el árbol. Si utilizas una función que requiere una función en tu plantilla, el compilador generará automáticamente código que la importe. Pero si no utilizas una función, entonces generamos código que no la importe, lo que significa que la función será tree-shaken.

Otra característica de Vue 3 es el mejor rendimiento de renderizado. El renderizador de Vue 3 mejora el rendimiento del proceso de renderizado utilizando optimizaciones como el hoisting y el inlining de partes estáticas e implementando la reactividad de Vue 3 con proxies ES6. Además, viene con emocionantes nuevos sub-proyectos y actualizaciones como a continuación:

  • Rápido, Vite-powered build toolchain.
  • Más ergonómico Composición API sintaxis a través de <script setup>
  • Soporte mejorado de TypeScript IDE para Componentes de Archivo Único a través de Volar.
  • Comprobación de tipo de línea de comandos para SFC a través de vue-tsc.
  • Gestión de estados más sencilla a través de Pinia.
  • Nueva extensión de herramientas de desarrollo con soporte simultáneo para Vue 2 / Vue 3 y un sistema de plugins que permite a las bibliotecas de la comunidad conectarse a los paneles de herramientas de desarrollo.

Vite es una cadena de herramientas de construcción ligera y rápida con soporte de primera clase para Vue SFC. Está creado por Evan You, ¡el propio autor de Vue! La configuración oficial de Vue 3 está ahora basada en Vite.

Te puede interesar: 5 formas de usar múltiples bases de datos en Laravel

¿Por qué Vue?

codersfree-vue3

@vue-cli/service está construido sobre webpack, es un agrupador de módulos que agrupará todo tu proyecto Vue en el arranque, recargas en caliente y compilación. Mientras que Vite tomará la sintaxis ES Import de tu código y dejará que el navegador analice la importación y haga una petición HTTP para cada importación.

vue-cli está ahora en modo de mantenimiento y se recomienda mover / iniciar nuevos proyectos con Vite a menos que dependamos de características específicas solo para webpack. Vite proporcionará una experiencia superior al desarrollador en la mayoría de los casos.

La razón principal para hacer el movimiento es todo acerca de la velocidad. Debido a que utiliza el soporte nativo del navegador para los módulos JavaScript, el tiempo de arranque del servidor es instantáneo. Este enfoque también significa que Hot Module Replacement sigue siendo rápido sin importar el tamaño de la aplicación, ya que no es necesario reconstruir todo el paquete.

En conclusión, Vue 3 vite supone una mejora significativa con respecto a Vue 2 y ofrece una serie de nuevas características y mejoras que ayudarán a los desarrolladores a crear aplicaciones más potentes y eficientes.

La introducción de la API de composición y la función setup(), así como la mejora del rendimiento y la API global, convierten a Vue 3 en un framework potente y versátil para crear interfaces de usuario. ¡Esperamos que te haya resultado útil esta información!

¿Quieres crear una página web? En Coders Free contamos con servicios de diseño gráfico para hacer crecer tu negocio, así como diversos cursos online con todos los niveles de programación. ¡Contáctanos para obtener más información!


1 comentarios

Inicia sesión para comentar

Comentarios:

  • Edwin López

    Edwin López hace 10 meses

    Excelente Articulo reseña de una manera muy razonable toda la potencialidad de Vue 3. Los felicito…