Angular Academy · Lektion

Beräknade signaler

Härled värden som uppdateras automatiskt.

Lektion 1 av 413 steg

Beräknade signaler är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad är en beräknad signal

En computed()-signal härleder ett värde från en eller flera andra signaler. När en källsignal ändras beräknas det härledda värdet om lat — endast när något läser det.

Beräknade signaler är skrivskyddade: du kan inte anropa .set() på dem.

Skapa en computed

Du skickar en funktion till computed(). Angular spårar automatiskt varje signal som du läser i den.

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

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

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

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

Automatisk beroendespårning

Du behöver aldrig deklarera beroenden manuellt. När du läser price() och quantity() i callback-funktionen registreras de automatiskt som beroenden.

Om en signal läses villkorligt och villkoret inte uppfylls spåras den inte under den körningen.

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

Lathet och memoization

En computed körs endast när den läses och cachar sitt resultat. Om du läser den två gånger utan att källorna ändras körs funktionen en gång.

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

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

Kedja beräknade signaler

Beräknade signaler kan bero på andra beräknade signaler och därmed bilda en reaktiv graf.

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

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

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

Använda computed i en komponent

Beräknade signaler är särskilt användbara i komponenter. Mallen renderas om endast när det beräknade värdet faktiskt ändras.

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

Computed är skrivskyddade

Att försöka ändra en beräknad signal ger ett kompileringsfel. De finns enbart för att uttrycka härlett tillstånd.

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

Jämförelse och överhoppade omberäkningar

Som standard använder en computed Object.is för jämförelsen. Om det nya beräknade värdet är lika med det gamla meddelas inte beroende signaler, vilket undviker onödigt arbete.

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

Anpassad likhetsfunktion

Du kan skicka alternativet equal för att styra när en computed ska anses ha ändrats — användbart för objekt eller arrayer.

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

Undvik sidoeffekter i computed

En computed måste vara ren: inga HTTP-anrop, ingen loggning som beteende och inga ändringar av andra signaler. Sidoeffekter hör hemma i effect(). Genom att hålla computed ren blir den reaktiva grafen förutsägbar.

Computed jämfört med metoder

En metod i en mall körs vid varje change detection-cykel. En computed körs endast när dess beroenden ändras och cachar resultatet — mycket effektivare för härledda värden.

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

Snabbtest

Testa din förståelse av beräknade signaler.

Besvara frågan i den interaktiva lektionen

Sammanfattning: beräknade signaler

Du har lärt dig att computed() skapar skrivskyddade härledda signaler med automatisk beroendespårning, lat utvärdering och memoization.

Håll dem rena — inga sidoeffekter.
De kan bero på andra beräknade signaler.
Använd equal för anpassad ändringsidentifiering.

Nästa steg: köra sidoeffekter med effect().

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Beräknade signaler” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Beräknade signaler”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Beräknade signaler”?

Härled värden som uppdateras automatiskt. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Beräknade signaler”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy