6 pontos por xguru 2024-09-06 | 3 comentários | Compartilhar no WhatsApp
  • 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 chamada defineProps agora 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 hydrate da API defineAsyncComponent().

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() e this.$host para 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 ref estático.
  • A abordagem anterior era limitada a atributos ref estáticos, porque o compilador precisava conseguir analisar o atributo ref.
  • 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 defer para <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

 
[Este comentário foi ocultado.]
 
narusas 2024-09-06

Nesta versão, a praticidade no desenvolvimento real de componentes melhorou bastante mesmo.

 
xguru 2024-09-06

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