$derived.by для сложных производных значений
Вычисляйте производные значения с произвольной логикой, используя форму обратного вызова $derived.
«$derived.by для сложных производных значений» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Производные значения из нескольких инструкций
Для производных значений, которым нужно больше одного выражения, используйте форму с обратным вызовом.
let result = $derived.by(() => {
if (count > 10) return "high";
if (count > 5) return "medium";
return "low";
});Та же реактивность
Обратный вызов отслеживает зависимости так же, как $derived с одним выражением.
Лучшая читаемость
Для сложной логики форма .by понятнее, чем объединение всего в одном выражении.
Циклы и ветвления
Внутри обратного вызова можно использовать циклы for, if-else и let.
Чистые функции
Как и $derived, .by должен быть чистым. Побочные эффекты не допускаются.
Мемоизация
Результат кэшируется до тех пор, пока зависимости не изменятся.
Избегайте ресурсоёмких вычислений
Если вычисление требует много ресурсов, рассмотрите возможность кэширования за пределами производного значения.
Вывод типов
TypeScript выводит возвращаемый тип из обратного вызова.
Сочетание с $effect
Используйте $derived.by для вычисляемых значений, а $effect — для побочных эффектов. Разделяйте их.
Миграция
Преобразуйте вложенные блоки $: в один $derived.by, чтобы сделать код понятнее.
Практическое применение
Подходит для фильтрации и сортировки списков, вычисления сводных показателей и условного форматирования.
Быстрая проверка
Когда используется $derived.by?
Итоги
Используйте $derived.by(() => ...) для многоэтапных вычисляемых значений с ветвлениями или циклами.
Часто задаваемые вопросы
Урок «$derived.by для сложных производных значений» бесплатный?
Да — полный текст урока «$derived.by для сложных производных значений» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «$derived.by для сложных производных значений»?
Вычисляйте производные значения с произвольной логикой, используя форму обратного вызова $derived. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «$derived.by для сложных производных значений»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- $state.raw для нереактивного состояния
- $derived.by для сложных производных значений
- $effect.root для ручной очистки
- Переход с Svelte 4 на 5