在Angular的模板中，不要随意调用函数，要注意！

3 年 ago
文, 翔
1 minute

在Angular的模板中调用函数会对性能产生影响。

在Angular中调用函数可能会导致严重的性能问题。

有什么问题？

Angular最初的设计是为了检测到数据的变化，并只更新受影响的DOM元素。
然而，Angular无法检测到通过函数调用引起的值的变化。
换句话说，在每个变化检测周期中，模板中所有的功能都会被重新执行，以进行比较。

举个例子来说明是什么意思？

假设我们定义了一个名为sortedHero()的排序函数，并从模板中加载它的话，那么…

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let name of heroName">{{name}}</div>
    <div style="height: 100vh; width: 100vw; background: #e3e3e3;" (click)="onClicked()"></div>
  `,
})
export class AppComponent implements OnInit {

  public heroNames = ['Taro','Jiro','Kiyoshi']

  constructor() { }

  ngOnInit() {
  }

  sortedHero() {
    console.count("sortedHero Called");
    return this.heroName.sort()
  }

  onClicked() {
    console.count("Clicked")
  }

}

（CodePen代码的描述可能略有不同，但所做的事情是一样的。）

在CodePen上，查看由kihaya-tech（@kihaya-tech）创建的SortedHeroExample。

假设”sortedHero”的情况下，如果HeroNames没有发生变化，似乎不会产生影响。然而，由于Angular无法有效检测变化，因此在每个检测周期中会被调用和重新执行以进行比较。

在这个例子中，每当按钮被点击，都会触发和调用重新检测周期。

不过？

嗯，一般来说，很少有人会不停地点击按钮，所以似乎对此没有太大影响。但是，Angular有许多以变更检测为触发的功能，可能会导致函数重新执行变得无法忽视的问题。

此外，仅仅进行一些函数调用时，可能会看起来对初始影响较小，但随着组件增加，函数的执行次数可能以指数方式增加，导致应用程序速度显著下降。

那么，getter函数呢？

有些人可能考虑使用getter方法来避免函数调用，但实际上，getter方法本身也是函数调用，同样会遇到相同的问题。

那么应该怎么办呢？

避免使用涉及复杂计算的模板调用。如果需要进行计算，不应依赖于Angular的值检测功能，需要手动管理。
通过使用属性来管理值，并使用setter函数或ngOnChanges来处理从父组件检测到的值可能是合适的解决方法。

请提供所需参考的具体内容。

由于之前一直存在疑问，而在调查时偶然找到了这篇文章，结果发现与日语相似的文献资源很少。

以下是根据以下文章进行修改后提交的内容： Angular: 不再在模板中调用函数

bannerAds