Angular Academy · Aula

Derivando estado com computed

Crie modelos de leitura a partir do estado básico.

Aula 2 de 413 etapas

Derivando estado com computed é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Estado derivado

Frequentemente, o estado é calculado a partir de outro estado: um total a partir de itens, uma lista filtrada ou um indicador de validade. O computed() do Angular cria um signal somente leitura cujo valor é derivado de outros signals.

Criando um computed

Passe uma função para computed(). Ela lê outros signals e retorna um valor. O resultado é recalculado somente quando uma de suas dependências muda.

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

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

Rastreamento automático de dependências

Você nunca precisa declarar as dependências. Todos os signals lidos dentro da função se tornam dependências automaticamente. Altere qty e total será recalculado; altere um signal não relacionado e nada acontecerá.

Memoização

computed() armazena o resultado em cache. Lê-lo várias vezes executa a função uma única vez, até que uma dependência mude. Isso torna econômicos os modelos de leitura derivados, mesmo quando são acessados em várias vinculações do modelo.

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

Computed em um armazenamento

Dentro de um armazenamento de signals, exponha modelos de leitura calculados para que os componentes consumam valores prontos para renderização, em vez de recalculá-los nos modelos.

@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));
}

Encadeando computed

Signals calculados podem ler outros signals calculados. Crie modelos de leitura em camadas: uma derivação básica alimenta outra de nível mais alto.

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

Filtragem e pesquisa

Um modelo de leitura comum é filtrar uma lista por um signal de pesquisa. O resultado filtrado é atualizado sempre que a lista ou o query muda.

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

Sem efeitos colaterais

Uma função computed() deve ser pura: ela apenas lê signals e retorna um valor. Não altere o estado, chame APIs nem escreva em outros signals dentro dela. Para efeitos colaterais, use effect().

Igualdade e salto de atualizações

Por padrão, computed usa igualdade referencial (Object.is) para decidir se o valor mudou. Se o novo valor for igual ao antigo, os consumidores não serão notificados, evitando trabalho desnecessário.

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

Usando computed em modelos

Leia signals calculados nos modelos como qualquer signal. O Angular atualiza apenas as vinculações cujo valor calculado realmente mudou.

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

Computed versus métodos

Use computed() para valores derivados do estado que devem ser atualizados automaticamente e memorizados. Use um método comum para cálculos pontuais que recebem argumentos ou devem ser executados sob demanda.

Verificação rápida

Verifique sua compreensão sobre signals calculados.

Responda na aula interativa

Recapitulação

Você criou estado derivado com computed(): rastreamento automático de dependências, funções puras memorizadas, modelos de leitura encadeáveis e atualizações ignoradas por meio da igualdade. Exponha modelos de leitura calculados dos armazenamentos para manter os modelos declarativos.

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 38
Aulas: 144

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Derivando estado com computed” é grátis?

Sim — o texto completo de “Derivando estado com computed” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Derivando estado com computed”?

Crie modelos de leitura a partir do estado básico. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Derivando estado com computed”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy