为什么 Angular 两次读取绑定字段/属性？答案

【问题标题】：Why does Angular read bound field/property twice?为什么 Angular 两次读取绑定字段/属性？
【发布时间】：2019-04-26 03:21:12
【问题描述】：

给定以下 Angular 组件，其字段 property 在每次渲染时被读取两次：

@Component({
  selector: 'why-twice',
  template: `<button (click)="handler()">re-render</button> {{property}}`
})
export class WhyTwice {
  get property() {
    console.log('get property') // This will be printed 2x
    return 0
  }
  handler() {}
}

Run this on StackBlitz

为什么会这样？读一遍还不够吗？

我正在使用 Angular 7

【问题讨论】：

这是因为 Angular 在开发版本中的每个变更检测中都会进行两次检查，在生产版本中进行检查，你会得到一个
blog.angular-university.io/…
感谢您的回答。我现在已经阅读了那篇博文，它完全回答了我的问题

标签： angular binding

【解决方案1】：

当 Angular 在开发节点中运行时。它在每个变更检测周期运行两次，这是为了避免您出现更多错误。如果你写这样的东西

Get property() { ret Date.now()}

然后你点击更改检测周期它会首先检查这个值，然后重新渲染所有更改，并再次检查所有内容以确保没有任何问题，但是这次属性值会有所不同，所以情况是属性值是不同的，并且视图具有不同的渲染值，因此它会出现 expressionChanged 错误。在生产中，每个周期只运行一次检查，因此您不会收到任何错误

【讨论】：

【解决方案2】：

Angular 有非常忙碌的变化检测方法。在开发角度有 ChangeDetectionStrategy 是默认的，它检查所有模型属性的变化。在你的情况下，

 get property() {
    console.log('get property')
    return 0
  }

getter在点击时获取价值，通过角度检测变化，同时价值也得到回报，这也是一种变化检测。

【讨论】：