Desde una biblioteca de JavaScript hasta un marco, el viaje de Vue es impresionante, especialmente cuando se considera cómo aún mantiene su naturaleza liviana. Hay varias características que ofrece Vue3, incluida Pinia, que permite una gestión de estado más sencilla, así como una cadena de herramientas de compilación que funciona en Vite. Ya sea que desee actualizar sus aplicaciones a Vue3 o simplemente desee experimentar con el marco, ¡hemos recopilado todo lo que necesita saber sobre Vue3 aquí!
¿Qué es Vue3?
Antes de entrar en los cambios que verá en Vue3, primero echemos un vistazo a lo que son Vue.js y sus componentes principales:
vista
Vue.js es un marco JavaScript front-end de código abierto que se puede utilizar para crear interfaces de usuario. El marco ofrece un enfoque de codificación declarativo y basado en componentes que ayuda en el desarrollo rápido de las pantallas de los usuarios. Se puede usar para desarrollar interfaces básicas o complicadas y se basa en HTML, CSS y JavaScript estándar de la industria. Las razones de la popularidad de Vue.js y la gran base de usuarios de Vue.js son su sintaxis fácil de programar, su facilidad de uso y su documentación bien definida.
Como se mencionó anteriormente, Vue.js se basa en dos características principales:
La representación declarativa permite al usuario definir la salida HTML de forma declarativa según el estado de JavaScript. Vue.js se expande en HTML normal con la ayuda de la sintaxis de plantilla.
Reactividad : Vue.js supervisa activamente el estado de JavaScript y, cuando se modifica, actualiza rápidamente el DOM.
Vue3.0
Los ingenieros que utilizan Vue 2 para codificar ahora deben actualizar a Vue3. Esto se debe a que tiene nuevas capacidades que hacen que el diseño de componentes consistentes y legibles sea mucho más fácil y mejores métodos para organizar nuestras aplicaciones. Vue3 es más fácil de usar, más corto y más fácil de mantener. Algunas de las características notables de Vue3 son Teleport, Fragments y múltiples modelos v.
La última versión también eliminó los filtros y tiene variables CSS basadas en el estado, así como una función de suspenso experimental. También tiene modificaciones de nombres de ciclo de vida y alteraciones de componentes de un solo archivo.
¿Se ha lanzado Vue3?
La última versión de Vue disponible, Vue3, se anunció inicialmente a mediados de 2018 y se lanzó oficialmente en septiembre de 2020. Vue3.0 se declaró como la versión predeterminada oficial del marco de javascript progresivo el 7 de febrero de 2022.
¿Qué hay de nuevo en Vue3?
Los cambios más emocionantes que esperamos en Vue3 son:
proporcionar/inyectar
Vue 2 permitió a los usuarios pasar datos como cadenas, matrices, objetos y más a través de accesorios en el código. Dichos datos podrían pasarse fácilmente de un elemento principal a sus elementos secundarios. Sin embargo, el uso de accesorios hizo que fuera más difícil enviar datos desde el elemento principal a un elemento secundario profundamente anidado. Como resultado, los desarrolladores tuvieron que usar Vuex Store y Event Hub. Vue 2.2.0 también incluía proporcionar/inyectar, pero no se recomendó su uso en el código general del programa.
Sin embargo, al utilizar la combinación mejorada de proporcionar/inyectar en Vue3, podemos pasar datos de manera más rápida y ordenada. Como sugiere el nombre, utilizamos para hacer que los datos sean accesibles desde un elemento principal a cualquiera de sus componentes secundarios, independientemente de qué tan profundamente anidados estén esos elementos secundarios. Aquí, podemos usar provide como objetos o como funciones.
teletransportarse
Según la lógica de la aplicación que desea compilar, sus componentes pueden mostrarse en lugares diferentes de donde desea que se muestren. Por ejemplo, es posible que desee crear una ventana emergente destinada a aparecer y ocupar toda la pantalla. Para superar esto, podemos usar el atributo de posición de dichos componentes en CSS, pero con Vue3, los desarrolladores también pueden usar Teleport.
Teleport permite a los programadores tomar un elemento de su contenedor inicial en el que está envuelto y moverlo a cualquier componente ya existente en la página donde están en uso. Por ejemplo, puede reubicar un elemento de encabezado desde el div #app al encabezado. Recuerde que solo puede usar Teleport para mover elementos a componentes de código que existen fuera de Vue DOM.
Fragmentos
Es difícil tener varios componentes raíz en la plantilla de un archivo en Vue 2. Los programadores comenzaron a encerrar todos los componentes en un componente principal como una solución para el mismo. A veces, los programadores pueden necesitar representar un elemento sin un contenedor que lo envuelva. Los ingenieros ahora pueden tener numerosos elementos en su archivo de plantilla raíz gracias a Fragmentos, que es una función agregada a Vue3.
API global de Vue
Es posible que haya encontrado Vue.component o Vue.use con frecuencia en el archivo main.js de una aplicación Vue. Se les conoce como API globales, y hay muchos métodos de este tipo en Vue 2. Aquí, si tiene varias instancias de su aplicación, todas ellas se colocan encima de Vue. Es difícil limitar la funcionalidad específica a una sola instancia de aplicación.
Vue3 resuelve este problema mediante la introducción de una nueva API global llamada createApp. Con este método, puede obtener una nueva instancia de una aplicación Vue. Todas las API relacionadas con Vue 2.x se transferirán a instancias de aplicaciones separadas. Esto permite que cada instancia de su aplicación tenga funciones exclusivas sin interrumpir otras instancias que ya están en uso.
API de eventos
Además de usar Vuex Store, el uso de Event Bus es uno de los métodos más populares que han usado los programadores para pasar datos entre elementos que no comparten un contexto padre-hijo. Sin embargo, los códigos como $on, $off y $once se eliminaron en Vue3. Pero todavía se puede acceder a $emit ya que los elementos secundarios deben emitir eventos a sus elementos principales. Una solución a esto sería usar provide/inject.
Cadena de herramientas de compilación impulsada por Vite
Diseñado por Evan You, el creador de Vue, Vite es una cadena de herramientas de soporte Vue SFC de primer nivel que es liviana y rápida de crear. Vite es ahora el motor detrás de la configuración de compilación estándar de Vue3. El paquete de módulos @vue-cli/service , que se basa en el paquete web, envolverá toda su aplicación Vue en el inicio, las recargas en caliente y la compilación. Vite, por otro lado, tomará la sintaxis ES Import de su código de programa y permitirá que el navegador analice cada importación antes de enviar una solicitud HTTP.
El cambio se está realizando principalmente por razones de velocidad. El servidor se inicia de inmediato, ya que emplea soporte de navegador nativo para componentes de JavaScript y es mucho más rápido.
Sintaxis de la API de composición
La API de opciones se usó para crear estados y lógica de elementos. La API de Composición fue lanzada por Vue3 como sustituto de la misma. Es simplemente una colección de API que nos permite crear elementos Vue sin definir opciones mediante el uso de métodos importados.
La API de composición contiene las siguientes API:
API de reactividad : por ejemplo, ref() y reactive(). Puede construir directamente el estado reactivo, el estado calculado y los observadores usando esto.
Enlaces de ciclo de vida: por ejemplo, onMounted() y onUnmounted(). Podemos conectarnos al ciclo de vida del elemento usando ganchos de ciclo de vida.
Inyección de dependencia : por ejemplo, provide() e inject(). El uso del sistema de inyección de dependencias de Vue con las API de Reactividad es posible gracias a la inyección de dependencias.
Ventajas de usar API de composición
Las principales ventajas de usar las API de composición sobre la API de opciones son:
- Ya no es necesario un elemento con Vue3 para generar un estado reactivo.
- Al agregar numerosos atributos reactivos, la configuración en los elementos de Vue.js puede inflarse. Podría ser útil tener estas variables reactivas abstraídas en archivos javascript separados debido a esto.
- El principal beneficio de la API de composición es que permite reutilizar una lógica clara y efectiva en forma de métodos componibles. Aborda todos los problemas con los mixins, el principal método de reutilización de la lógica en la API de opciones.
- Puede escribir código en la API de composición con inferencia de tipo completa.
- Los programas que escribe en la API de composición son más eficientes y los nombres de las variables se pueden hacer más pequeños. Esto reduce los gastos generales.
- Puede compartir mejor el código de su programa con la API de composición.
Pinia
Pinia es una herramienta de gestión de estado ligera para Vue.js. Nos permite compartir un estado entre elementos y páginas. Crea un marco de gestión de estado completamente tipificado y fácil de usar utilizando el nuevo concepto de reactividad en Vue3. Esta es ahora la nueva biblioteca de control de estado estándar de Vue3.
Pinia sirvió inicialmente como un estudio sobre el potencial de Vuex. Durante mucho tiempo, Vuex fue el sistema de administración de estados sugerido para Vue, pero con Vue3, Pinia es el sistema recomendado para administrar estados en la documentación oficial. Actualmente, Vuex está en modo de mantenimiento. Aunque sigue funcionando, no se añadirán nuevas funciones. Se recomienda el uso de Pinia para aplicaciones nuevas.
¿Por qué Pinia?
Pinia es muy liviano, llegando a solo 1 KB. Además, se integra con las herramientas de desarrollo de Vue.js para mejorar su experiencia de codificación en Vue 2 y Vue3. Dado que Pinia infiere todos sus tipos de datos, también puede ofrecerle autocompletado completo y preciso en javascript. Pinia también es modular por diseño, fácil de usar y ampliable. En general, Pinia parece ser liviano, sencillo y sencillo. Se parece mucho a tratar con elementos y contiene todas las herramientas necesarias para la programación dinámica en Vue3.
¿Vue 2 quedará obsoleto?
La última actualización menor para Vue 2 fue Vue 2.7, que se lanzó en julio de 2022. Vue 2 se encuentra actualmente en modo de mantenimiento. Si bien no se enviarán funciones adicionales, recibirá correcciones de errores cruciales y parches de seguridad durante 18 meses. A fines de 2023, Vue 2 quedará obsoleto.
Migración desde Vue 2
Según su software, cambiar a Vue3 puede no valer la pena si está trabajando en un proyecto extremadamente grande usando Vue 2. Use Vue3 si los problemas de eficiencia persisten a pesar de sus mejores esfuerzos de optimización.
Si desea o no migrar su aplicación a Vue3 depende de su tamaño y complejidad. La mayoría de la sintaxis y las técnicas en Vue 2 son las mismas que en Vue3. Sin embargo, si desea utilizar algunos de los cambios mencionados anteriormente, la migración sería una mejor idea.
Vue.js en el proyecto AppMaster
La plataforma AppMaster utiliza el marco VueJS, o más bien la tercera versión del marco, para crear una aplicación frontal para nuestros usuarios. Vue 3 se utiliza para crear administradores, paneles y portales de clientes, y toda la interfaz de AppMaster Studio también se realiza utilizando el marco VueJS.
Usamos un enfoque especial llamado micro-frontends o microservicios front-end para poder desarrollar nuestro producto de manera rápida y eficiente; por ejemplo, cada editor de modelos de datos y editor de procesos comerciales es una aplicación frontal completamente independiente en nuestra plataforma. Esto nos permite desarrollar de forma muy rápida e independiente desde el punto de vista del equipo de desarrollo, lo que aumenta la velocidad general de nuestro producto. Todas estas ventajas que nuestros clientes pueden obtener utilizando nuestras aplicaciones.
En el futuro, además del modo de aplicación de página única SPA, agregaremos el modo SSR (representación del lado del servidor), que permitirá a nuestros clientes crear no solo paneles de administración y portales personalizados, sino también sitios web con todas las funciones con muy alta optimización SEO.
Acerca de sin código
Uno de los elementos clave que influyen en la democratización de la codificación es el enfoque de desarrollo sin código . Hoy en día, un mayor número de personas puede acceder a la programación en general con la ausencia de codificación. Simplifica el diseño web, el desarrollo de aplicaciones móviles y el desarrollo web receptivo.
AppMaster se encuentra entre las aplicaciones que se pueden usar para crear automáticamente el código fuente. Puede ver e inspeccionar el código en cualquier momento. Con AppMaster, tiene la opción de personalizar la información del proyecto utilizando lenguaje informático. También permitimos que las personas exporten el código si así lo desean. Esta es una garantía de que tiene control y propiedad completos sobre la aplicación en la que está trabajando con AppMaster.
Conclusiones
Si desea una explicación más detallada de cómo Vue3 es diferente de Vue 2, junto con fragmentos de código, puede consultar la documentación oficial de Vue.js. Hemos mencionado la mayoría de los cambios importantes que debe tener en cuenta. Es importante que esté al tanto de las actualizaciones de Vue3 si está interesado en crear aplicaciones con este marco.
