Hoy, el equipo de desarrollo de Vue ha presentado el lanzamiento oficial de Vue.js 3.0 “One Piece”. Esta nueva versión principal del framework proporciona un rendimiento mejorado, tamaños de paquete más pequeños, una mejor integración de TypeScript, nuevas API para abordar casos de uso a gran escala y una base sólida para iteraciones futuras.
La versión 3.0 representa más de 2 años de esfuerzos de desarrollo, con más de 30 RFC, más de 2600 confirmaciones, 628 solicitudes de extracción de 99 colaboradores, además de una enorme cantidad de trabajo de desarrollo y documentación fuera del repositorio principal.
Nos gustaría expresar nuestro más profundo agradecimiento a los miembros de nuestro equipo por asumir este desafío, a nuestros colaboradores por las solicitudes de extracción.
A nuestros patrocinadores por el apoyo financiero, y a la comunidad en general por participar en nuestras discusiones de diseño y brindar comentarios en las epre-versiones de lanzamiento.
Vue es un proyecto independiente creado y sostenido, por y para la comunidad y sin ella, Vue 3.0 no hubiera sido posible.
Llevando más lejos el concepto de “framework progresivo”
Vue tenía una misión simple desde su humilde comienzo: Ser un framework accesible que cualquier persona pueda aprender rápidamente. A medida que nuestra base de usuarios creció, el framework también creció en alcance para adaptarse a las demandas crecientes.
Con el tiempo, el framework Vue evolucionó hasta convertirse en lo que llamamos un framework progresivo, ósea, un framework que puede adoptarse y aprenderse gradualmente. Al mismo tiempo que proporciona apoyo continuo a medida que el usuario afronta escenarios cada vez más exigentes.
Hoy en día, con más de 1.3 millones de usuarios en todo el mundo (entre comillas), vemos que Vue se usa en una amplia gama de escenarios, desde la páginas tradicionales para implementarles una mayor interactividad, hasta sobre aplicaciones completas de una sola página con cientos de componentes.
Vue 3 quiere llevar esa flexibilidad aún más lejos.
Módulos internos en capas
El núcleo de Vue 3.0 aún se puede usar a través de una simple etiqueta
<script>
, pero sus componentes internoes se han reescrito desde cero n una colección de módulos desacoplados. La nueva arquitectura proporciona una mejor capacidad de mantenimiento y permite a los usuarios finales reducir hasta la mitad el tamaño del tiempo de ejecución.
Estos módulos también exponen la API de nivel inferior que desbloquean muchos casos de uso avanzados:
- El compilador admite transformaciones AST personalizadas para personalizaciones en tiempo de compilación (p. Ej. , I18n en tiempo de compilación)
- El motor de ejecución principal proporciona una API de primera clase para crear renderizados personalizados dirigidos a diferentes destinos de renderizado (por ejemplo , dispositivos móviles nativos , WebGL o terminales). El renderizador DOM predeterminado se crea utilizando la misma API.
- El módulo
@vue/reactivityexporta funciones que brindan acceso directo al sistema de reactividad de Vue y se puede usar como un paquete independiente. Se puede usar para emparejarlo con otras soluciones de plantillas (por ejemplo, lit-html) e incluso en escenarios sin una interfaz de usuario.
Nuevas API para abordar la escala
La API basada en objetos 2.x está prácticamente intacta en Vue 3. Sin embargo, la nueva versión 3.0 también presenta una API de composición, un nuevo conjunto API destinado a abordar los puntos débiles del uso de Vue en aplicaciones a gran escala.
La API de composición se basa en la API de reactividad y permite la composición lógica y la reutilización de manera similar a los ganchos de React, patrones de organización de código más flexibles y una inferencia de tipos más confiable que la API basada en objetos 2.x.
La API de composición también se puede usar con Vue 2.x a través del complemento @ vue / composicion-api, y ya existen bibliotecas de utilidades de composición para las API que funcionan tanto para Vue 2 como para Vue 3 (por ejemplo , vueuse , vue-composable).
Mejoras de rendimiento
Vue 3 ha demostrado mejoras de rendimiento significativas con respecto a Vue 2 en relación al tamaño de los paquetes (hasta un 41% más ligero), en el renderizado inicial (hasta un 55% más rápido), en las actualizaciones (hasta un 133% más rápido) y en el uso de memoria ( hasta un 54% menos).
En Vue 3, hemos adoptado el enfoque de “DOM virtual”: El compilador de plantillas realiza optimizaciones agresivas y genera un código de función de renderizado que eleva el contenido estático, deja pistas de tiempo de ejecución para los tipos de enlace y, lo más importante, aplana los nodos dinámicos dentro una plantilla para reducir el costo del recorrido en tiempo de ejecución.
Por lo tanto, el usuario obtiene lo mejor de ambos mundos: rendimiento optimizado por el compilador a partir de plantillas o control directo a través de funciones de renderizado manual cuando el caso de uso lo requiere.
Integración con TypeScript mejorada
El código base de Vue 3 está escrito en TypeScript, con definiciones de tipos generadas, probadas y empaquetadas automáticamente para que estén siempre actualizadas. La API de composición funciona muy bien con la inferencia de tipos.
Vetur, nuestra extensión oficial de VSCode, ahora es compatible con la expresión de plantilla y la verificación de tipos de accesorios aprovechando la escritura interna mejorada de Vue 3. Ah, y la escritura de Vue 3 es totalmente compatible con TSX si esa es tu preferencia.
Funciones experimentales
Hemos propuesto dos nuevas funciones para los componentes de archivos singulares (SFC, también conocidos como archivos
.vue
):
-
<script setup>: Usar Composition API dentro de SFC -
<style vars: Variables CSS controladas por estados dentro de SFC
Estas funciones ya están implementadas y disponibles en Vue 3.0, pero se proporcionan solo con el propósito de recopilar comentarios. Seguirán siendo experimentales hasta que se fusionen las RFC.
También hemos implementado un componente
suspense
actualmente no documentado, que permite esperar en dependencias asíncronas anidadas (componentes asíncronos o componentes con
async setup()
) en el procesamiento inicial o cambio de rama.
Estamos probando e iterando sobre esta función con el equipo de Nuxt.js ( Nuxt 3 está en camino ) y probablemente la solidifiquemos en la próxima versión 3.1.
Proceso de lanzamiento por fases
El lanzamiento de Vue 3.0 marca la línea de desarroll ode Vue. Si bien algunos de los subproyectos aún pueden necesitar más trabajo para alcanzar un estado estable (específicamente la integración del enrutador y Vuex en las herramientas de desarrollo).
También recomendamos a los autores de bibliotecas que comiencen a actualizar sus proyectos para que sean compatibles con Vue 3.
Se puede consultar la Guía de bibliotecas de Vue 3 para obtener detalles sobre todos los subproyectos del framework.
Soporte de migración e IE11
Hemos retrasado la compilación de migración (la compilación de v3 cy el comportamiento compatible con v2 +) y la compilación de IE11 debido a limitaciones de tiempo.
Nuestro objetivo es centrarnos en ellas en el cuarto trimestre de 2020. Por lo tanto, los usuarios que planean migrar una aplicación v2 existente o requieren El soporte de IE11 deben tener en cuenta esas limitaciones.
Próximos pasos en el desarrollo de Vue
A corto plazo después del lanzamiento, nos centraremos en:
- Construcción de la migración.
- Soporte IE11.
- Integración del enrutador y Vuex en nuevas herramientas de desarrollo.
- Más mejoras en la inferencia del tipo de plantilla en Vetur.
Por el momento, los sitios web de documentación, las sucursales de GitHub y las etiquetas npm dist para los proyectos de orientación Vue 3 y v3 seguirán estando relevados al uso del agregado de
next
.
Esto significa que
npm install vue
aún instalará Vue 2.x y
npm install vue@next
instalará Vue 3. Estamos planeando cambiar todos los enlaces de documentos, ramas y etiquetas dist a 3.0 por defecto para finales de 2020.
Al mismo tiempo, hemos comenzado a planificar la versión 2.7, que será la última versión menor planificada de la línea de versiones 2.x. 2.7 respaldando mejoras compatibles con la versión 3 y emitir advertencias sobre el uso de las API que se eliminan o cambian en la versión 3 para ayudar con la posible migración.
Estamos planeando trabajar en la versión 2.7 en el primer trimestre de 2021, que se convertirá directamente en LTS al momento de su lanzamiento y con una vida útil y mantenimiento de 18 meses.
Probando Vue 3.0
Para obtener más información sobre Vue 3.0, consulte nuestro nuevo sitio web de documentación. Si ya es usuario de Vue 2.x, vaya directamente a la Guía de migración.