Реактивные переменные с let
Объявляйте реактивное состояние в Svelte с помощью обычных объявлений let
«Реактивные переменные с let» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Без специального API
В Svelte обычные объявления let в блоке script являются реактивными. Эквивалента useState не существует.
Объявление и использование
Объявите переменную и вставьте её значение в разметку. При её обновлении перерисовывается зависящая от неё часть.
<script>
let count = 0;
</script>
<p>The count is {count}</p>Обновление через присваивание
Именно присваивание запускает обновление. count = count + 1 сообщает Svelte, что значение изменилось.
function inc() { count = count + 1; }Сокращённая запись инкремента
Работают и стандартные сокращённые записи JS: count++, count += 5 и т. д.
function inc() { count++; }Массивы и изменение
Изменение массива с помощью push НЕ запускает реактивность. Необходимо выполнить повторное присваивание.
items = [...items, newItem]; // ok
items.push(newItem); // does not updateОбъекты и изменение
Для объектов действует то же правило: замените ссылку либо заново присвойте конкретное свойство и родительский объект.
user.name = "Bea";
user = user; // tell Svelte it changedПочему важно присваивание
Компилятор Svelte обрабатывает операторы присваивания. Вызовы методов, например push, компилятору невидимы.
Локальное и общее состояние
Обычное объявление let создаёт состояние, локальное для одного экземпляра компонента. Для обмена данными между компонентами используйте props или stores.
Начальные значения
Правая часть объявления let выполняется один раз при инициализации экземпляра компонента.
Типизация
С lang="ts" явно указывайте типы переменных.
<script lang="ts">
let count: number = 0;
</script>Несколько переменных
Можно объявить любое количество реактивных переменных — в одной или нескольких строках.
let x = 0, y = 0;
let items = [];Быстрая проверка
Что запускает реактивность?
Итоги
Обычное объявление let является реактивным. Для запуска обновлений выполняйте повторное присваивание, а не изменяйте значение. Для массивов и объектов необходимо менять ссылку.
Часто задаваемые вопросы
Урок «Реактивные переменные с let» бесплатный?
Да — полный текст урока «Реактивные переменные с let» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Реактивные переменные с let»?
Объявляйте реактивное состояние в Svelte с помощью обычных объявлений let Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Реактивные переменные с let»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Структура из шаблонов script и style
- Реактивные переменные с let
- Интерполяция: {expression}
- Вычисляемые значения: реактивные объявления $: