Angular Academy · Lektion

Pure versus Impure Pipes

Verstehen Sie das Verhalten von Pipes bei der Änderungsprüfung.

Pure versus Impure Pipes ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Reine Pipes als Standard

Jede Pipe ist standardmäßig rein. Eine reine Pipe wird nur erneut ausgeführt, wenn sich ihr Eingabewert oder ihre Argumente per Referenz ändern.

Warum reine Pipes schnell sind

Angular überspringt den Aufruf einer reinen Pipe während der Änderungserkennung, wenn sich die Eingabereferenz nicht geändert hat. Dadurch sind reine Pipes effizient.

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string) { return value + "!"; }
}
// pure: only re-runs when value changes

Änderungen von Referenzen und Werten

Reine Pipes erkennen Änderungen der Referenz. Wenn Sie ein Array direkt verändern, wird eine reine Pipe NICHT ausgelöst, da die Referenz des Arrays gleich bleibt.

// this will NOT re-run a pure pipe:
this.items.push("new");

// this WILL, new reference:
this.items = [...this.items, "new"];

Eine unreine Pipe deklarieren

Setzen Sie pure: false im @Pipe-Dekorator, um eine Pipe unrein zu machen. Eine unreine Pipe wird bei jedem Zyklus der Änderungserkennung ausgeführt.

@Pipe({ name: "filter", standalone: true, pure: false })
export class FilterPipe implements PipeTransform {
  transform(items: string[], term: string) {
    return items.filter(i => i.includes(term));
  }
}

Wann unreine Pipes sinnvoll sind

Verwenden Sie unreine Pipes, wenn die Transformation von veränderlichen Daten abhängt, etwa beim Filtern eines Arrays, das Sie direkt verändern, oder von Werten, die sich ohne eine neue Referenz ändern.

Die Kosten unreiner Pipes

Unreine Pipes werden sehr häufig, nämlich bei jedem Zyklus der Änderungserkennung, ausgeführt. Aufwendige Logik kann die Leistung beeinträchtigen; halten Sie sie daher schlank.

Die async-Pipe ist unrein

Die integrierte async-Pipe ist unrein. Sie abonniert ein Observable oder Promise und aktualisiert die Ansicht, sobald neue Werte eintreffen.

<p>{{ data$ | async }}</p>

// component
data$ = this.http.get("/api/data");

Die async-Pipe kündigt Abonnements automatisch

Ein großer Vorteil der async-Pipe ist die automatische Abmeldung, wenn die Komponente zerstört wird. Dadurch werden Speicherlecks verhindert.

@Component({
  template: "<p>{{ count$ | async }}</p>"
})
export class DemoComponent {
  count$ = interval(1000);
}

Mutation bei reinen Pipes vermeiden

Damit reine Pipes mit Collections funktionieren, behandeln Sie Daten als unveränderlich: Erstellen Sie neue Arrays und Objekte, anstatt vorhandene zu verändern.

// good for pure pipes:
this.users = this.users.concat(newUser);
this.user = { ...this.user, name: "Ada" };

Rein oder unrein auswählen

Bevorzugen Sie reine Pipes für ein vorhersehbares und schnelles Verhalten. Verwenden Sie unreine Pipes nur, wenn Sie wirklich auf Mutationen reagieren müssen. Oft lassen sich unreine Pipes durch eine Neugestaltung mit unveränderlichen Daten vollständig vermeiden.

Bewährte Vorgehensweisen für unreine Pipes

Wenn Sie eine unreine Pipe verwenden müssen, speichern Sie Ergebnisse zwischen, damit sie bei unveränderten Eingaben nicht erneut berechnet werden.

@Pipe({ name: "memoFilter", standalone: true, pure: false })
export class MemoFilterPipe implements PipeTransform {
  private last = "";
  private cache: string[] = [];
  transform(items: string[], term: string) {
    if (term === this.last) return this.cache;
    this.last = term;
    this.cache = items.filter(i => i.includes(term));
    return this.cache;
  }
}

Kurze Wissensprüfung

Testen Sie Ihr Verständnis von reinen und unreinen Pipes.

Zusammenfassung

Reine Pipes werden nur bei Änderungen der Referenz ausgeführt und sind schnell; unreine Pipes (pure: false) laufen in jedem Zyklus und eignen sich für veränderliche Daten. Die async-Pipe ist unrein und kündigt Abonnements automatisch.

Bevorzugen Sie unveränderliche Daten, damit reine Pipes effizient bleiben.

Häufig gestellte Fragen

Ist die Lektion „Pure versus Impure Pipes“ kostenlos?

Ja — der vollständige Text von „Pure versus Impure Pipes“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Pure versus Impure Pipes“?

Verstehen Sie das Verhalten von Pipes bei der Änderungsprüfung. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Pure versus Impure Pipes“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy