Angular Academy · Aula

Sinais computados

Derive valores que se atualizam automaticamente.

Sinais computados é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 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.

O que é um sinal computado

Um sinal computed() deriva um valor de um ou mais sinais. Sempre que um sinal de origem muda, o valor computado é recalculado de forma tardia — somente quando algo o lê.

Os sinais computados são somente leitura: não é possível chamar .set() neles.

Criando um sinal computado

Você passa uma função para computed(). O Angular acompanha automaticamente cada sinal que você lê dentro dela.

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

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

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

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

Acompanhamento automático de dependências

Você nunca declara dependências manualmente. Ler price() e quantity() dentro da função de retorno registra-os automaticamente como dependências.

Se um sinal for lido condicionalmente e o trecho não for alcançado, ele não será acompanhado nessa execução.

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

Execução tardia e memorização

Um sinal computado é executado somente quando lido e armazena o resultado em cache. Se você o ler duas vezes sem alterações na origem, a função será executada uma vez.

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

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

Encadeando sinais computados

Os sinais computados podem depender de outros sinais computados, formando um grafo reativo.

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

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

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

Usando um sinal computado em um componente

Os sinais computados são especialmente úteis em componentes. O template é renderizado novamente somente quando o valor computado realmente muda.

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

Sinais computados são somente leitura

Tentar definir um sinal computado gera um erro em tempo de compilação. Eles existem exclusivamente para expressar estado derivado.

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

Igualdade e recomputações ignoradas

Por padrão, um sinal computado usa Object.is para fazer a comparação. Se o novo valor computado for igual ao anterior, os dependentes não serão notificados, evitando trabalho desnecessário.

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

Função de igualdade personalizada

Você pode passar uma opção equal para controlar quando um sinal computado é considerado alterado — útil para objetos ou matrizes.

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

Evite efeitos colaterais em sinais computados

Um sinal computado deve ser puro: sem chamadas HTTP, sem registro de informações como comportamento e sem alterar outros sinais. Os efeitos colaterais pertencem a effect(). Manter os sinais computados puros torna o grafo reativo previsível.

Sinais computados versus métodos

Um método do template é executado em cada ciclo de detecção de alterações. Um sinal computado é executado somente quando suas dependências mudam e armazena o resultado em cache — muito mais eficiente para valores derivados.

// 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));

Verificação rápida

Teste sua compreensão sobre sinais computados.

Recapitulação: sinais computados

Você aprendeu que computed() cria sinais derivados somente para leitura, com acompanhamento automático de dependências, avaliação tardia e memorização.

Mantenha-os puros — sem efeitos colaterais.
Eles podem depender de outros sinais computados.
Use equal para uma detecção de alterações personalizada.

A seguir: executando efeitos colaterais com effect().

Perguntas Frequentes

A aula “Sinais computados” é grátis?

Sim — o texto completo de “Sinais computados” é 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 “Sinais computados”?

Derive valores que se atualizam automaticamente. 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 1 de 4.

Quanto tempo leva a aula “Sinais computados”?

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