方法 vs 管道

Question

在Angular应用程序中，使用管道和方法进行模板插值有什么区别吗？

例如：

<h1>{{ name.toLowerCase() }}</h1> 和 <h1>{{ name | lowercase }}</h1>

从性能方面考虑，是否真的有所提升，还是只是个人喜好？

我知道在模板中调用方法通常会降低性能，因为Angular会不断检查其执行是否改变了任何内容。大多数情况下，我会在组件上使用计算属性。

- User 5842

---

我不确定性能如何，所以无法回答你的问题，但管道通常是全局的，因此可重复使用。它们可以避免你在每个组件上编写相同的函数。 - Brad

Answer 1

简而言之：不要在模板中使用函数或方法，应该使用管道。

当输入值变化时，管道才会被调用。函数或方法将在每次变更检测时被调用。如果您想了解有关模板中使用函数的更多信息，这里有一篇不错的文章。

这里有一个演示方法与管道之间差异的运行中的 stackblitz 示例。

- ibenjelloun

---

请注意，不纯净的 管道与方法的行为相同！ - Safron

Answer 2

请阅读有关管道的文档，特别关注所谓的“纯”和“不纯”的管道。这将解决有关管道性能的问题。

像这样调用函数 {{ name.toLowerCase() }} 取决于函数本身。在这种特定情况下，我认为它与管道相同，但管道是专门为此目的创建的。

- Arttu

---

你可以在回答中引用这篇文章：《纯管道和非纯管道在Angular中的本质区别以及其重要性》（https://blog.angularindepth.com/the-essential-difference-between-pure-and-impure-pipes-and-why-that-matters-999818aa068） - Max Koretskyi

更新的链接：Angular中纯管道和非纯管道的本质区别以及其重要性 - Ollie