Angular Academy · Урок

Выведение состояния с помощью computed

Создавайте модели для чтения на основе исходного состояния

«Выведение состояния с помощью computed» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Производное состояние

Часто состояние вычисляется из другого состояния: общая сумма из элементов, отфильтрованный список или признак допустимости. computed() Angular создаёт доступный только для чтения сигнал, значение которого выводится из других сигналов.

Создание computed

Передайте функцию в computed(). Она читает другие сигналы и возвращает значение. Результат пересчитывается только при изменении одной из его зависимостей.

import { signal, computed } from '@angular/core';

const price = signal(10);
const qty = signal(3);
const total = computed(() => price() * qty());
// total() === 30

Автоматическое отслеживание зависимостей

Объявлять зависимости не нужно. Все сигналы, прочитанные внутри функции, автоматически становятся зависимостями. Измените qty — и total пересчитается; измените несвязанный сигнал — и этого не произойдёт.

Мемоизация

computed() кэширует результат. При многократном чтении функция выполняется один раз, пока не изменится зависимость. Поэтому производные модели чтения остаются эффективными даже при использовании во множестве привязок шаблона.

const expensive = computed(() => heavyTransform(data()));
// reading expensive() repeatedly does not re-run heavyTransform

Computed в хранилище

Внутри хранилища сигналов открывайте производные модели чтения, чтобы компоненты получали готовые к отображению значения, а не пересчитывали их в шаблонах.

@Injectable({ providedIn: 'root' })
export class CartStore {
  private _items = signal<Item[]>([]);
  readonly items = this._items.asReadonly();
  readonly count = computed(() => this._items().length);
  readonly subtotal = computed(() =>
    this._items().reduce((s, i) => s + i.price, 0));
}

Цепочки computed

Производные сигналы могут читать другие производные сигналы. Создавайте многоуровневые модели чтения: базовое производное значение передаётся на следующий уровень.

const subtotal = computed(() => items().reduce((s, i) => s + i.price, 0));
const tax = computed(() => subtotal() * 0.2);
const total = computed(() => subtotal() + tax());

Фильтрация и поиск

Распространённая модель чтения — фильтрация списка по сигналу поиска. Отфильтрованный результат обновляется при изменении списка или запроса.

const query = signal('');
const all = signal<User[]>([]);
const filtered = computed(() =>
  all().filter(u => u.name.toLowerCase().includes(query().toLowerCase())));

Без побочных эффектов

Функция computed() должна быть чистой: она только читает сигналы и возвращает значение. Не изменяйте состояние, не вызывайте API и не записывайте значения в другие сигналы внутри неё. Для побочных эффектов используйте effect().

Равенство и пропуск обновлений

По умолчанию computed использует ссылочное равенство (Object.is), чтобы определить, изменилось ли значение. Если новое значение равно старому, потребители не уведомляются, что позволяет избежать лишней работы.

const status = computed(() => count() > 0 ? 'has' : 'empty');
// while count stays > 0 the string stays 'has' -> no downstream updates

Использование computed в шаблонах

Читайте производные сигналы в шаблонах так же, как любые сигналы. Angular обновляет только те привязки, производное значение которых действительно изменилось.

@Component({
  template: '<p>Items: {{ store.count() }} — Total: {{ store.subtotal() }}</p>'
})
export class SummaryComponent {
  store = inject(CartStore);
}

Computed и методы

Используйте computed() для производных от состояния значений, которые должны автоматически обновляться и мемоизироваться. Обычный метод подходит для разовых вычислений с аргументами или вычислений по требованию.

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете производные сигналы.

Итоги

Вы создали производное состояние с помощью computed(): автоматическое отслеживание зависимостей, мемоизированные чистые функции, цепочки моделей чтения и пропуск обновлений благодаря равенству. Открывайте производные модели чтения из хранилищ, чтобы шаблоны оставались декларативными.

Часто задаваемые вопросы

Урок «Выведение состояния с помощью computed» бесплатный?

Да — полный текст урока «Выведение состояния с помощью computed» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Выведение состояния с помощью computed»?

Создавайте модели для чтения на основе исходного состояния Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Выведение состояния с помощью computed»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy