Angular Academy · Урок

Вычисляемые сигналы

Получайте значения, обновляемые автоматически.

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

Что такое вычисляемый сигнал

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

Вычисляемые сигналы доступны только для чтения: нельзя вызвать для них .set().

Создание computed

Передайте функцию в computed(). Angular автоматически отслеживает каждый сигнал, который Вы читаете внутри неё.

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

const price = signal(100);
const quantity = signal(2);

const total = computed(() => price() * quantity());

console.log(total()); // 200

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

Вам не нужно объявлять зависимости вручную. Чтение price() и quantity() внутри функции обратного вызова автоматически регистрирует их как зависимости.

Если сигнал читается условно, но условие не выполнено, в этом запуске он не отслеживается.

const showTax = signal(false);
const tax = signal(20);
const base = signal(100);

const final = computed(() =>
  showTax() ? base() + tax() : base()
);
// When showTax() is false, "tax" is NOT a dependency

Ленивые вычисления и мемоизация

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

const a = signal(1);
const doubled = computed(() => {
  console.log('recompute');
  return a() * 2;
});

doubled(); // logs "recompute", returns 2
doubled(); // cached, returns 2, no log

Цепочки вычисляемых сигналов

Вычисляемые сигналы могут зависеть от других вычисляемых сигналов, образуя реактивный граф.

const firstName = signal('Ada');
const lastName = signal('Lovelace');

const fullName = computed(() => firstName() + ' ' + lastName());
const greeting = computed(() => 'Hello, ' + fullName());

console.log(greeting()); // Hello, Ada Lovelace

Использование computed в компоненте

Вычисляемые сигналы особенно полезны в компонентах. Шаблон повторно отображается только при фактическом изменении вычисляемого значения.

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

@Component({
  selector: 'app-cart',
  template: '<p>Total: {{ total() }}</p>'
})
export class CartComponent {
  items = signal([10, 20, 30]);
  total = computed(() => this.items().reduce((a, b) => a + b, 0));
}

Вычисляемые сигналы доступны только для чтения

Попытка задать вычисляемый сигнал приводит к ошибке во время компиляции. Такие сигналы предназначены исключительно для описания производного состояния.

const count = signal(0);
const doubled = computed(() => count() * 2);

// doubled.set(10); // ERROR: Property 'set' does not exist
count.set(5);       // OK - update the source instead
console.log(doubled()); // 10

Равенство и пропущенные пересчёты

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

const value = signal(2);
const isEven = computed(() => value() % 2 === 0);

// value 2 -> 4 -> 6 all yield isEven() === true
// Dependents of isEven do NOT re-run on those changes

Пользовательская функция сравнения

Можно передать параметр equal, чтобы управлять моментом, когда вычисляемый сигнал считается изменившимся. Это особенно полезно для объектов и массивов.

const data = signal({ id: 1, name: 'A' });

const view = computed(
  () => data(),
  { equal: (a, b) => a.id === b.id }
);
// Dependents re-run only when the id changes

Избегайте побочных эффектов в computed

Вычисляемый сигнал должен быть чистым: никаких HTTP-запросов, журналирования как части поведения или изменения других сигналов. Побочные эффекты должны находиться в effect(). Чистый computed делает реактивный граф предсказуемым.

Вычисляемые сигналы и методы

Метод шаблона выполняется в каждом цикле обнаружения изменений. Вычисляемый сигнал запускается только при изменении его зависимостей и кэширует результат — это гораздо эффективнее для производных значений.

// Method: recalculates every CD cycle
getTotal() { return this.items().reduce((a, b) => a + b, 0); }

// Computed: memoized, runs only on item change
total = computed(() => this.items().reduce((a, b) => a + b, 0));

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

Проверьте своё понимание вычисляемых сигналов.

Итоги: вычисляемые сигналы

Вы узнали, что computed() создаёт производные сигналы, доступные только для чтения, с автоматическим отслеживанием зависимостей, ленивым вычислением и мемоизацией.

Сохраняйте их чистыми — без побочных эффектов.
Они могут зависеть от других вычисляемых сигналов.
Используйте equal для пользовательского обнаружения изменений.

Далее: выполнение побочных эффектов с помощью effect().

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

Урок «Вычисляемые сигналы» бесплатный?

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

Чему я научусь в уроке «Вычисляемые сигналы»?

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

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

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

Сколько времени занимает урок «Вычисляемые сигналы»?

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

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

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

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

← Назад к Angular Academy