Lançamento do Vue 3.5 "Tengen Toppa Gurren Lagann"
(blog.vuejs.org)- Esta versão minor inclui melhorias internas e novos recursos úteis, sem mudanças que quebrem compatibilidade.
Otimizações no sistema de reatividade
- O sistema de reatividade do Vue foi amplamente refatorado, trazendo melhorias de desempenho e redução no uso de memória (-56%), sem mudanças de comportamento.
- A refatoração também resolveu problemas de valores computados e de memória durante SSR.
- No 3.5, o rastreamento de reatividade para arrays reativos grandes e profundos foi otimizado, ficando até 10 vezes mais rápido em alguns casos.
Desestruturação reativa de Props
- A desestruturação reativa de Props foi estabilizada no 3.5 e agora vem ativada por padrão.
- No
<script setup>, variáveis desestruturadas a partir da chamadadefinePropsagora são reativas. - Esse recurso simplifica bastante a declaração de props com valores padrão ao aproveitar a sintaxe nativa de valores padrão do JavaScript.
Melhorias de SSR
Lazy Hydration
- Componentes assíncronos agora podem controlar o momento da hidratação ao definir uma estratégia por meio da opção
hydrateda APIdefineAsyncComponent().
useId()
useId()é uma API que pode ser usada para gerar IDs únicos por aplicação, garantidos de forma estável entre renderização no servidor e no cliente.- Ela pode ser usada para gerar IDs de elementos de formulário e atributos de acessibilidade, podendo ser utilizada em aplicações SSR sem incompatibilidades de hidratação.
data-allow-mismatch
- Quando o valor do cliente inevitavelmente difere do valor do servidor (por exemplo, datas), é possível suprimir avisos de incompatibilidade de hidratação com o atributo
data-allow-mismatch. - Também é possível restringir os tipos de incompatibilidade permitidos fornecendo um valor ao atributo (
text,children,class,style,attribute).
Melhorias em elementos customizados
- O 3.5 corrige vários problemas antigos relacionados à API
defineCustomElement()e adiciona diversos novos recursos para criar elementos customizados com Vue. - Suporte à configuração da aplicação para elementos customizados por meio da opção
configureApp. - Adição das APIs
useHost(),useShadowRoot()ethis.$hostpara acessar o elemento host e o shadow root de elementos customizados. - Suporte para montar elementos customizados sem Shadow DOM ao passar
shadowRoot: false. - Suporte à opção
nonce, que é anexada às tags<style>injetadas pelo elemento customizado.
Outros recursos notáveis
useTemplateRef()
- O 3.5 introduz uma nova forma de obter referências de template por meio da API
useTemplateRef(). - Antes do 3.5, a recomendação era usar refs comuns fazendo o nome da variável corresponder ao atributo
refestático. - A abordagem anterior era limitada a atributos
refestáticos, porque o compilador precisava conseguir analisar o atributoref. - Em comparação,
useTemplateRef()associa a referência por meio de um ID de string em tempo de execução, permitindo binding dinâmico de referências para IDs que mudam.
Teleport adiado
- Uma limitação conhecida do componente embutido
<Teleport>era que o elemento de destino precisava existir quando o componente teleport fosse montado. - Isso impedia que usuários teleportassem conteúdo para outros elementos renderizados pelo Vue.
- No 3.5, foi introduzida a prop
deferpara<Teleport>montado após o ciclo de renderização atual, e agora isso passa a funcionar.
onWatcherCleanup()
- O 3.5 introduz
onWatcherCleanup(), uma API importada globalmente para registrar callbacks de limpeza em watchers.
3 comentários
Nesta versão, a praticidade no desenvolvimento real de componentes melhorou bastante mesmo.
Pelo visto, o nome desta versão é "Tengen Toppa Gurren Lagann". (É uma obra-prima! Acho que foi a última coisa da Gainax que eu vi)
O Vue, de forma tradicional?, usou títulos de animes. A 1.0 foi Evangelion, a 2.0 foi Ghost in the Shell, a 3.0 foi One Piece, a 3.3 foi Samurai X, e a 3.4 foi Slam Dunk
https://en.wikipedia.org/wiki/Vue.js#Versions