Lanzamiento de Vue 3.5 "Tengen Toppa Gurren Lagann"
(blog.vuejs.org)- Esta versión menor incluye mejoras internas y nuevas funciones útiles, sin cambios incompatibles con versiones anteriores
Optimización del sistema de reactividad
- El sistema de reactividad de Vue fue refactorizado a gran escala para mejorar el rendimiento y el uso de memoria (-56%), sin cambios en el comportamiento
- La refactorización también resuelve problemas de valores computados y memoria durante SSR
- En 3.5, se optimizó el seguimiento de reactividad para arreglos reactivos grandes y profundos, logrando en algunos casos hasta 10 veces más velocidad
Desestructuración reactiva de props
- La desestructuración reactiva de props se estabilizó en 3.5 y ahora está habilitada por defecto
- En
<script setup>, las variables desestructuradas desde una llamada adefinePropsahora son reactivas - Esta función simplifica mucho la declaración de props con valores predeterminados al aprovechar la sintaxis nativa de valores por defecto de JavaScript
Mejoras en SSR
Hidratación diferida
- Los componentes asíncronos ahora pueden controlar cuándo hidratarse especificando una estrategia mediante la opción
hydratede la APIdefineAsyncComponent()
useId()
useId()es una API que puede usarse para generar IDs únicos por aplicación, garantizados de forma estable tanto en renderizado del servidor como del cliente- Puede usarse para generar IDs de elementos de formularios y atributos de accesibilidad, y puede utilizarse en aplicaciones SSR sin desajustes de hidratación
data-allow-mismatch
- Cuando un valor del cliente inevitablemente será distinto del valor del servidor (por ejemplo, una fecha), se puede suprimir la advertencia de desajuste de hidratación con el atributo
data-allow-mismatch - También se puede limitar el tipo de desajuste permitido proporcionando un valor al atributo (
text,children,class,style,attribute)
Mejoras en elementos personalizados
- La versión 3.5 corrige muchos problemas de larga data relacionados con la API
defineCustomElement()y agrega varias funciones nuevas para crear elementos personalizados con Vue - Soporta configuración de la aplicación para elementos personalizados mediante la opción
configureApp - Agrega las APIs
useHost(),useShadowRoot()ythis.$hostpara acceder al elemento host y al shadow root de elementos personalizados - Soporta montar elementos personalizados sin Shadow DOM pasando
shadowRoot: false - Soporta proporcionar la opción
nonce, que se adjunta a las etiquetas<style>inyectadas por el elemento personalizado
Otras funciones destacadas
useTemplateRef()
- La versión 3.5 introduce una nueva forma de obtener referencias de plantilla mediante la API
useTemplateRef() - Antes de 3.5, se recomendaba usar una referencia normal haciendo coincidir el nombre de la variable con un atributo
refestático - El enfoque anterior estaba limitado a atributos
refestáticos porque el compilador debía poder analizar el atributoref - En comparación,
useTemplateRef()hace coincidir referencias mediante un ID de cadena en tiempo de ejecución, por lo que admite enlaces dinámicos de referencias para IDs cambiantes
Teleport diferido
- Una limitación conocida del componente integrado
<Teleport>era que el elemento de destino debía existir cuando el componente teleport se montaba - Esto impedía que los usuarios hicieran teleport de contenido hacia otro elemento renderizado por Vue
- En 3.5 se introduce la prop
deferpara<Teleport>, que se monta después del ciclo de renderizado actual, por lo que ahora esto ya funciona
onWatcherCleanup()
- La versión 3.5 introduce
onWatcherCleanup(), una API importada globalmente para registrar callbacks de limpieza en watchers
3 comentarios
En esta versión, la comodidad al desarrollar componentes en la práctica sí aumentó muchísimo.
Parece que el nombre de esta versión es "Tengen Toppa Gurren Lagann". (¡Es una obra maestra! Creo que esto fue lo último de Gainax que vi)
Vue, de forma tradicional, ha tomado títulos de anime/manga para sus versiones. La 1.0 fue Evangelion, la 2.0 Ghost in the Shell, la 3.0 One Piece, la 3.3 Rurouni Kenshin, y la 3.4 Slam Dunk
https://en.wikipedia.org/wiki/Vue.js#Versions