在视图中使用简单的 get 方法时成本是否昂贵？

Question

@Component({
  template: `Hello {{user.getName()}}``
})
class UserProfile {
  user: User = new User();
}

假设用户拥有所有私有字段，并且访问它们的唯一方法是调用方法。我们都知道 Angular 经常调用更改检测，但我很好奇是否有这样简单的方法：

getName(): string {
  return this.name;
}

需要花费一些钱吗？如果更改检测触发很多次，那么所有这些方法调用都会被添加到堆栈中。你有什么看法？

Answer 1

在视图中使用方法或 getter 会更加消耗性能。将数据存储在变量中是一种很好的做法，因为对于视图绑定，应该避免昂贵的计算，因为由于更改检测，可以经常调用方法或 getter。 因此，最好将结果存储在字段中并绑定到该字段。

绑定到字段比在绑定中使用 getter 和方法更有效。

Answer 2

如果你只是从函数返回一个值，那么成本并不高。您还可以创建 getter 以获得更好的语法：

get userName() {
 return this.user.getName();
}

但是如果你在方法中进行一些计算，它会降低渲染性能，但是你可以使用pure Pipe行为（纯管道实现记忆模式）进行优化（你可以使用已经创建的ngx-pipe-function。

Answer 3

我目前重构了一个性能非常慢的组件，从视图中删除了所有方法，重构后问题解决了，我认为延迟是由于视图中的方法造成的，但过了一会儿我注意到性能问题是由于console.log关于这些方法