Angular性能 - 管道 vs getter

Question

例如，我有一个简单的待办事项数组。

[
  { name: 'Item 1', completed: false },
  { name: 'Item 2', completed: false }
  { name: 'Item 3', completed: true }
  { name: 'Item 4', completed: false }
]

这个数组应该分成两行显示：
完成和未完成。

我有两种方法来实现它。
1. Getter。

public get doneItems() { 
    // filter and return only done items. And similar method for not done 
}

2 管道。

问题：
您是否有一些度量标准或建议，以便在页面上有多达100个项目、需要实时更新数组（添加、删除、更新）和更复杂的项目时，哪些选项具有更好的性能。
谢谢！

- Sergey A

---

就性能而言，如果你不是在解决一个对网站至关重要的问题，我无法想象会有任何显著的差异！我只会根据上下文和解决问题的方式来做决定。 - undefined

只需进行过滤，对于100个项目来说应该没有任何区别。通常情况下，简单的解决方案更好。 - undefined

明白了，谢谢你们！ - undefined

一般来说，不要使用管道进行过滤（https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe）。原因是当变更检测启动并更新视图时，管道会每次运行，而组件中的代码在您的控制下。但在您的情况下，由于您计划拥有一个`getter` ，该getter将在每个模板更新时调用，所以没有区别。但我仍然更喜欢将过滤器放在那里，因为在将来，重构该代码将更容易。 - undefined

Answer 1

正如@mok所强调的那样，在您的情况下，这完全无关紧要，但是如果精确回答您的问题... 好吧，让我们进行一些推测。

Getter。它可能会在变更检测周期中被调用数十亿次。如果您在其中实现过滤，则每次getter将返回包含相同对象集的新数组。这将导致ngFor指令中的常量diff重新计算，并且每次结果都相同。再次说明，对于100个项目，这种开销根本不可测量（angular团队真的很棒地优化了这个东西！），但仍然是一堆不必要的操作。不是最佳选择。

管道。要在这里得到一个好的解决方案，你需要做两件事：a）实现pure过滤管道；2）确保你的源数组是不可变的，即不能对该数组进行任何更新——对数组的每个操作（添加/删除/移动/更改项）必须生成新的数组。这样，Angular将为您提供几乎最好的选择——除非您更改源数组或过滤值，否则Angular在变更检测周期中不会采取任何操作来更新视图。因此，这里可能有一个好的解决方案，但需要进行一些仔细和深思熟虑的编码。

这里还有�一个�行的选择。你�以创建两个部分数组——DoneArray和NotDoneArray（命�很愚蠢，我知�，你�以�得更好😉），并在改�主数组时填充它们。有了这些，你�以创建两个简�的getter，�返�这些数组，并在模�中使用这些getter。��主数组没有改�，这些数组就是���的，因此�会导致�外的�更检测开销。在这�情况下，你根本�需�特殊的管�，�需使用普通的*ngFor��。缺点是需�存储两�的数�，但对��有100个项目�说...�在�呢？🙂

PS.忘记了�常��的事情——Angular文档中还有some explanations，强烈建议��以这�方�使用管�。你也需�记�这一点，并检查你的解决方案是�在最�化��然有效。

- Alexander Leonov