Angular 中绑定到简单字段、对象属性和 getter 的性能影响

Question

[(ngModel)]="room"与绑定到对象的属性相比，绑定到简单字段（例如）时的性能是否有任何差异？（例如[(ngModel)]="lesson.room"）如果是，为什么？

关于 getter：我的理解是否正确，绑定到 getter/setter 以及例如单向绑定到函数是不好的，因为该函数将在每个检测周期被调用，而 Angular 无法区分没有变化的情况以及实际发生更改并且实际上需要更新视图的情况？这应该使吸气剂成为这方面性能最低的选项。

Answer 1

性能应该没有差异，至少在lesson参考更改之前是这样。即使如此，差异也不存在，因为 JavaScript 中的属性访问速度非常快。应该注意的是，这room也是一种财产。

如果访问器方法或属性获取器已绑定，它将在每个更改检测周期调用。如果函数调用成本不高和/或更改检测周期不太密集，那么它可能是合适的。如果它们很密集，则可以通过变化检测策略来减少它们的数量OnPush。

例如，{{ foobar }}绑定就可以了：

get foobar() {
  return this.foo + this.bar;
}

并且{{ factorial(num) }}绑定可能成本高昂，它可以重构为纯管道或在更改时缓存到属性num。

应该注意的是，可能有一些警告，例如，如果属性 getter 没有在原型上定义，那么它在 Chrome/V8 中将遭受性能损失，例如：

lesson = { get room() {/*...*/} }

根据实际的性能影响，这些问题可能会被视为初步优化。