Angular Academy · 课时

纯管道与非纯管道

Q: 「纯管道与非纯管道」这节课中我会学到什么？

了解管道的变更检测行为。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解管道的变更检测行为。

纯管道与非纯管道 是 CoddyKit 上的免费 Angular Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

默认情况下为纯管道

每个管道默认都是纯管道。纯管道只有在输入值或参数按引用发生变化时才会重新运行。

纯管道为何运行快速

如果输入引用没有变化，Angular 会在变更检测期间跳过对纯管道的调用。这使纯管道更加高效。

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

引用变化与值变化

纯管道检测的是引用变化。直接修改数组不会触发纯管道，因为数组引用保持不变。

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

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

声明非纯管道

在 @Pipe 装饰器中设置 pure: false，即可将管道设为非纯管道。非纯管道会在每个变更检测周期运行。

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

何时使用非纯管道

当转换依赖可变数据时，可以使用非纯管道，例如筛选直接修改的数组，或处理在没有新引用的情况下发生变化的值。

非纯管道的代价

非纯管道运行得非常频繁，会在每个变更检测周期运行。管道中的复杂逻辑可能会影响性能，因此请保持其轻量。

async 管道是非纯管道

内置的 async 管道是非纯管道。它会订阅 Observable 或 Promise，并在新值到达时更新视图。

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

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

async 管道会自动取消订阅

async 管道的一大优点是组件销毁时会自动取消订阅，从而避免内存泄漏。

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

使用纯管道时避免修改数据

要让纯管道正确处理集合，请将数据视为不可变数据：创建新的数组和对象，而不是修改已有对象。

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

选择纯管道还是非纯管道

优先使用纯管道，以获得可预测且快速的行为。只有确实需要响应数据修改时，才使用非纯管道。很多时候，改用不可变数据就能完全避免使用非纯管道。

非纯管道的最佳实践

如果必须使用非纯管道，请缓存结果，避免在输入未变化时重复计算。

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

快速检查

检查您对纯管道和非纯管道的理解。

回顾

纯管道只在引用发生变化时运行，速度较快；非纯管道（pure: false）会在每个周期运行，适合处理可变数据。async 管道是非纯管道，并且会自动取消订阅。

优先使用不可变数据，以保持纯管道的高效。

常见问题解答

「纯管道与非纯管道」课时是免费的吗？

是的 — 「纯管道与非纯管道」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「纯管道与非纯管道」这节课中我会学到什么？

了解管道的变更检测行为。你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「纯管道与非纯管道」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy