Visão Geral do Svelte 5
O Svelte 5 introduziu um novo sistema de reatividade chamado “Runes”. Ele proporciona uma reatividade mais explícita e previsível, além de melhorar a compatibilidade com TypeScript.
O que são Runes
Runes são funções especiais que começam com $. O compilador as reconhece e transforma em código reativo.
$state - Estado Reativo
Estado de Objetos
{user.name} is {user.age} years old
$derived - Valores Derivados
Define valores que são calculados a partir de outros estados.
Area: {area}
Perimeter: {perimeter}
Derivações Complexas
$effect - Efeitos Colaterais
Executa efeitos colaterais em resposta a mudanças de estado.
Operações DOM
$props - Propriedades de Componentes
{name} is {age} years old
console.log(newAge)} />
$bindable - Binding Bidirecional
Value: {text}
Mudanças no Tratamento de Eventos
Suporte a TypeScript
Guia de Migração
# Ferramenta de migração automática
npx sv migrate svelte-5
Migração Gradual
O Svelte 5 mantém compatibilidade com a sintaxe tradicional, permitindo migração gradual.
Desempenho
Benchmark (atualização de lista com 1000 elementos):
- Svelte 4: 12ms
- Svelte 5: 5ms (58% mais rápido)
Tamanho do bundle:
- Runtime Svelte 4: 18KB
- Runtime Svelte 5: 22KB (ligeiro aumento devido a novas funcionalidades)
Resumo
Os Runes do Svelte 5 proporcionam uma reatividade mais explícita e previsível. Com $state, $derived e $effect, o gerenciamento de estado se torna intuitivo, e a integração com TypeScript também foi aprimorada.
← Voltar para a lista