0Pricing
Angular Academy · Урок

Обновление сигналов с помощью set и update

Изменяйте значения сигналов реактивным способом.

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

Изменение сигнала

Изменяемый сигнал можно изменить двумя способами: с помощью set() заменить значение и с помощью update() получить новое значение на основе текущего.

Использование set()

set(newValue) полностью заменяет значение сигнала переданным значением.

const c = signal(0);
c.set(1);
console.log(c()); // 1

Когда использовать set()

Используйте set(), когда новое значение не зависит от старого, например при присваивании нового значения из пользовательского ввода или ответа API.

const name = signal('');
name.set('Alice');
console.log(name()); // Alice

Использование update()

update(fn) принимает функцию, которая получает текущее значение и возвращает новое. Этот способ удобен, когда следующее значение зависит от предыдущего.

const c = signal(0);
c.update(v => v + 1);
console.log(c()); // 1

Увеличение с помощью update()

Классический счётчик использует update(), чтобы увеличить существующее значение.

const count = signal(10);
count.update(v => v + 1); // 11
count.update(v => v - 1); // 10

Иммутабельное обновление объектов

Поскольку обнаружение изменений сравнивает ссылки, заменяйте объекты, а не изменяйте их. Скопируйте старое значение в новый объект с помощью оператора spread.

const point = signal({ x: 0, y: 0 });
point.update(p => ({ ...p, x: p.x + 1 }));
console.log(point()); // { x: 1, y: 0 }

Иммутабельное обновление массивов

Для массивов возвращайте новый массив. Не используйте push/splice для существующего массива; применяйте spread или методы массивов, которые возвращают новые массивы.

const items = signal<string[]>(['a']);
items.update(arr => [...arr, 'b']);
console.log(items()); // ['a', 'b']

Итоги: set() и update()

set: итоговое значение уже известно. update: итоговое значение вычисляется на основе текущего. Оба метода уведомляют потребителей, если значение действительно изменилось.

Равенство ссылок и изменения

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

const c = signal(5);
c.set(5); // no change, dependents not notified

Изменение объектов не рекомендуется

В старых API был метод mutate(), но современный рекомендуемый подход — иммутабельные обновления с помощью set() и update(), возвращающих новые ссылки.

Обновление сигналов в методах

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

export class CounterComponent {
  count = signal(0);
  increment() { this.count.update(v => v + 1); }
  reset() { this.count.set(0); }
}

Быстрая проверка: set и update

Выберите подходящий инструмент для задачи.

Итоги: обновление сигналов

Вы научились использовать set() для замены значения и update(fn) для вычисления нового значения на основе текущего. Вы также увидели, как неизменяемо обновлять объекты и массивы, чтобы равенство ссылок обнаруживало изменения. Далее: непосредственное использование сигналов в шаблонах.

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

Урок «Обновление сигналов с помощью set и update» бесплатный?

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

Чему я научусь в уроке «Обновление сигналов с помощью set и update»?

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

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

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

Сколько времени занимает урок «Обновление сигналов с помощью set и update»?

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

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

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

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

  1. Что такое сигналы
  2. Создание и чтение сигналов
  3. Обновление сигналов с помощью set и update
  4. Сигналы в шаблонах
← Назад к Angular Academy