Вычисляемые значения: реактивные объявления $:
Автоматически получайте значения из реактивного состояния с помощью синтаксиса метки $:
«Вычисляемые значения: реактивные объявления $:» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Метка $:
Добавьте $: перед любым оператором, чтобы сделать его реактивным. Он будет выполняться заново при изменении используемых переменных.
$: doubled = count * 2;Автоматическое отслеживание
Svelte анализирует правую часть и находит ссылки на переменные. Вам не нужно вручную перечислять зависимости.
Использование в разметке
Используйте вычисленное значение в шаблонах так же, как любую другую реактивную переменную.
<p>Double: {doubled}</p>Блочная форма
Реактивная метка может охватывать блок операторов для выполнения побочных эффектов.
$: {
console.log("count changed to", count);
localStorage.setItem("count", count);
}Несколько реактивных операторов
Объявляйте столько операторов $:, сколько необходимо. Svelte упорядочит их по зависимостям.
$: doubled = count * 2;
$: quadrupled = doubled * 2;Реактивный if
Можно объединять $: с управляющими конструкциями для условных побочных эффектов.
$: if (count >= 10) { alert("limit reached"); }Аналог useEffect
Воспринимайте $: как более удобный вариант useEffect. Массивы зависимостей не нужны.
Избегайте тяжёлых вычислений
Реактивные операторы должны выполняться быстро. Для затратных вычислений рассмотрите мемоизацию или перенос работы в хранилище.
Асинхронность внутри
Вы можете использовать await внутри, но будьте осторожны: инструкция может запуститься снова до завершения предыдущих операций await.
Когда не следует использовать
Для чистых функций от входных данных конструкция $: x = f(y) отлично подходит. Для настоящих побочных эффектов предпочтительнее использовать хуки жизненного цикла, например onMount.
Только на верхнем уровне
Метка $: должна находиться на верхнем уровне блока скрипта, а не внутри функции или вложенного блока.
Быстрая проверка
Что делает $:?
Итоги
$: объявляет реактивно вычисляемые значения и побочные эффекты. Зависимости отслеживаются автоматически.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «Вычисляемые значения: реактивные объявления $:» бесплатный?
Да — полный текст урока «Вычисляемые значения: реактивные объявления $:» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Вычисляемые значения: реактивные объявления $:»?
Автоматически получайте значения из реактивного состояния с помощью синтаксиса метки $: Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Вычисляемые значения: реактивные объявления $:»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Структура из шаблонов script и style
- Реактивные переменные с let
- Интерполяция: {expression}
- Вычисляемые значения: реактивные объявления $: