Svelte 5.0 меняет подход к реактивности в фронтенд-разработке. Руны - это новые примитивы, которые упрощают управление состоянием без лишнего boilerplate. Вы узнаете, как они решают проблемы предсказуемости и производительности.

Это полезно для команд, где код должен быть читаемым и масштабируемым. Руны и глубокая реактивность уменьшают ошибки с вложенными данными. В статье разберем ключевые фичи с примерами.

Руны: основа новой реактивности

Руны в Svelte 5 - это легковесные функции вроде $state, $derived и $effect. Они заменяют реактивные метки из прошлых версий, делая код предсказуемым. Раньше реактивность зависела от контекста компонента, теперь она работает везде - даже вне Svelte.

Например, $state создает реактивное состояние: let count = $state(0); При изменении count UI обновляется автоматически. Это упрощает перенос логики между компонентами. А $derived вычисляет значения на основе других: let double = $derived(count * 2); Без лишних подписок.

Руны решают проблему неявной реактивности. В старых версиях $: double = count * 2; работало только в компонентах. Теперь код переносимый и логичный. Подводим к сравнению с прошлым.

Преимущества рун:

• Предсказуемость: реакции явно объявлены.
• Универсальность: работают в утилитах и классах.
• Меньше boilerplate: нет нужды в реактивных блоках.

Важно: руны - опциональны в переходном режиме, но рекомендуется мигрировать.

Глубокая реактивность для массивов и объектов

Глубокая реактивность - это когда изменения в вложенных структурах автоматически обновляют UI. В Svelte 4 приходилось вручную присваивать массивы: items = […items]; В 5 это не нужно. Измените items.name - и интерфейс отреагирует.

Представьте список задач: let tasks = $state([{id:1, done:false}]); tasks.done = true; Без переприсваивания UI обновится. Это экономит время на типичных паттернах вроде форм или таблиц. Логично переходим к примерам и сравнению.

Как использовать:

• Объявляйте с $state для полной реактивности.
• Изменяйте свойства напрямую: obj.key = value.
• Поддержка для массивов: push, splice работают нативно.

Нюанс: для иммутабельности используйте $state.raw(), если нужно отключить прокси.

Сниппеты и улучшения композиции компонентов

Сниппеты - это мини-компоненты без отдельных файлов. Они встраиваются прямо в разметку: {#snippet header()}

Заголовок