Почему Angular читает связанное поле / свойство дважды?

Question

Учитывая следующий угловой компонент, его поле 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() {}
}

Запустите это на StackBlitz

Почему это так? Разве не достаточно прочитать его только один раз?

Я использую Angular 7

Answer 1

Когда угол запускается в узле разработки.Он запускается дважды при каждом цикле обнаружения изменений, потому что, чтобы избежать дальнейших ошибок.Если вы напишите что-то вроде этого

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

, и вы обнаружите цикл обнаружения изменений, он сначала проверит это значение, затем повторно выполнит все изменения и проверит все снова, чтобы убедиться, что ничего не случилось, но на этот раззначение свойства будет другим, поэтому дело в том, что значение свойства отличается, и представление имеет другое значение, отображаемое, поэтому возникает ошибка expressionChanged.Производственные проверки выполняются только один раз за цикл, поэтому вы не получите никакой ошибки

Answer 2

Угловые имеют очень беспокойный метод обнаружения изменений.В разработке angular есть ChangeDetectionStrategy по умолчанию, который проверяет изменения во всех свойствах модели.А в вашей ситуации

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

getter принимает значение при щелчке, которое обнаруживает изменение по углу, наряду со значением также возвращается, которое также обнаруживает изменение.