¡Vue 3.2 Liberado!
Este artículo es una traducción de la publicación original del Blog de Vue.
¡Nos complace anunciar el lanzamiento de Vue.js 3.2 «Quintessential Quintuplets»! Esta versión incluye muchas funciones nuevas importantes y mejoras de rendimiento, y no contiene cambios importantes.
Nuevas caraterísticas SFC
Dos nuevas funciones para componentes de un solo archivo (SFC, también conocidos como archivos .vue) se han graduado del estado experimental y ahora se consideran estables:
script setup "sugar sintax" en tiempo de compilación que mejora enormemente la ergonomía cuando se usa la API de composición dentro de los SFC.
style v-bind habilita los valores CSS dinámicos controlados por el estado del componente en las etiquetas SFC style.
A continuación, se muestra un componente de ejemplo que utiliza estas dos nuevas funciones juntas:
Pruébalo en SFC Playground o lee sus respectivas documentaciones:
Sobre la base de script setup, también tenemos un nuevo RFC para mejorar la ergonomía del uso de referencias con "sugar" habilitado para el compilador.
Web Components
Vue 3.2 presenta un nuevo método defineCustomElement para crear fácilmente elementos personalizados nativos utilizando las API de componentes de Vue:
Esta API permite a los desarrolladores crear bibliotecas de componentes de interfaz de usuario con tecnología Vue que se pueden usar con cualquier marco, o sin ningún marco. También hemos agregado una nueva sección en nuestros documentos sobre el consumo y la creación de componentes web en Vue.
Mejoras de rendimiento
Vue 3.2 incluye algunas mejoras de rendimiento significativas en el sistema de reactividad de Vue, gracias al gran trabajo de @basvanmeurs.
El compilador de plantillas también recibió una serie de mejoras:
Finalmente, hay una nueva directiva v-memo que brinda la capacidad de memorizar parte del árbol de plantillas. Un golpe de v-memo permite a Vue omitir no solo la diferencia de DOM virtual, sino también la creación de nuevos VNodes por completo. Aunque rara vez se necesita, proporciona una escotilla de escape para obtener el máximo rendimiento en ciertos escenarios, por ejemplo, listas grandes de v-for.
El uso de v-memo que es una adición de una línea, coloca a Vue entre los frameworks convencionales más rápidos en js-framework-benchmark:
Server-side Rendering
El paquete @vue/server-rendereren 3.2 ahora incluye una compilación del módulo ES que también está desacoplado de los componentes integrados de Node.js. Esto hace posible agrupar y aprovechar @vue/server-rendererpara su uso dentro de tiempos de ejecución que no son de Node.js, como CloudFlare Workers o Service Workers.
También mejoramos las API de renderizado de transmisión, con nuevos métodos para renderizar a la API de Web Streams. Consulta la documentación de @vue/server-renderer para obtener más detalles.
Effect Scope API
Vue 3.2 introduce una nueva API de alcance de efectos para controlar directamente el tiempo de eliminación de los efectos reactivos (calculados y observadores). Facilita el aprovechamiento de la API de reactividad de Vue fuera del contexto de un componente y también desbloquea algunos casos de uso avanzados dentro de los componentes.
Esta es una API de bajo nivel destinada principalmente a los autores de bibliotecas, por lo que se recomienda leer el RFC de la función para conocer la motivación y los casos de uso de esta función.
Para obtener una lista detallada de todos los cambios en 3.2, consulte el registro de cambios completo.
https://www.cursosdesarrolloweb.es/paths/ruta-aprendizaje-vue-3-composition-api/