优化的数据绑定机制如何在Angular2中工作

Question

I know data binding concept in AngularJs is a naive dirty checking mechanism. In the Google I/O videos , they have said that, they optimized the data binding/change detection in Angular2. How does it work in Angular2

Answer 1

Application state change can be caused by:

• Events,
• XHR - Fetching data,
• Timers - setTimeout(), setInterval()

They are all asynchronous.

So how Angular 2 know, when to run change detector? Because of Zones . There you can read more about it:

http://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html http://blog.thoughtram.io/angular/2016/01/22/understanding-zones.html

Zones have lifecycle events. ApplicationRef is listening zones onTurnDone event. Whenever this event is fired, it executes a tick() function which start change detection .

All components in Angular 2 have their own Change Detector (so it looks like component tree - from top to bottom). Change Detector is comparing variables references and if references do not changed, CD checks properties (if variable is an object).

There is really awesome article about that:

http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html