angular生命周期

1.各个生命周期钩子接口包含在@angular/core中,每个接口都对应一个名为”ng+接口名”的生命周期方法。例如@angular/core提供的OnInit接口暴露出了一个叫做ngOnInit的生命周期方法。

2.各个生命周期方法调用的顺序如下所示:

  • ngOnChanges: 当且仅当组件输入数据(@Input所修饰的组件数据)变化时被调用,该方法接收一个SimpleChanges对象,包含当前值和变化前的值。
  • ngOnInit: 会在第一次ngOnChanges之后被调用。
  • ngDoCheck: 会在每次变化监测时被调用,在每一个变化监测周期内,不管数据值是否发生了变化,ngDoCheck都会被调用。比如鼠标移动的时候会频繁触发mousemove事件,那么此时变化监测便会频繁被触发,随之带来的后果便是ngDoCheck被频繁调用,所以不应该在ngDoCheck里面写太过复杂的逻辑,否则性能大打折扣。
  • ngAfterContentInit: 使用将外部内容嵌入到组件视图中就会调用ngAfterContentInit,并且只会执行一次。
  • ngAfterContentChecked: 使用将外部内容嵌入到组件视图中后,或者每次变化监测的时候都会调用。
  • ngAfterViewInit: 创建完组件的视图以及子组件的视图后被调用。
  • ngAfterViewChecked: 创建完组件的视图以及子组件的视图后被调用一次,并且在每次子组件变化监测时也会被调用。
  • ngOnDestory: 销毁指令/组件之前触发。常在这里进行一些资源销毁的操作。

3.angular变化监测机制:

1.当数组发生变化时,Angular能够监测到这些变化并对其所绑定的DOM元素进行相应的更新。angular如何监测数据变化?策略是在适当的时机去检验对象的值是否被改动,什么时机是适当取决于NgZone这个服务来决定。NgZone能够获取到整个应用的上下文,能够对相关异步事件的发生,完成或者异常进行捕获,然后驱动angular的变化监测机制执行。数据变化的源头:在应用程序中,数据变化的源头可以分为如下三类:1.用户行为操作,比如点击;2.前后端数据交互;3.各种定时任务;这3个变化源头都拥有一个共同点那就是他们都是异步的。而之前所说的那个适当的时机就是当异步执行完之后去执行变化监测,而NgZone所做的就是让异步过程能够在执行完之后通知angular,这样angular就会执行下一轮的变化监测工作了,进而将数据更新到DOM上。

2.NgZone基于Zones实现,NgZone具有angular运行环境的执行上下文,在angular环境中注册的异步事件都运行在这个子zone上。

3.angular应用是有大大小小的组件组成的,每一个组件都拥有一个自己的变化监测器,由此一棵组件树也是一棵变化监测器树。变化监测器树中的数据流动总是从上到下单向流动的,这是因为变化监测的执行总是从根组件开始,接着从上到下的监测每一个组件的变化。正是因为每个组件都有一个独立的变化监测器,所以每个组件都能够自由灵活的控制变化监测器的暂停或者执行。这对于性能提升是很有意义的。

4.默认情况下,任何组件模型中的数据变化都会导致整个组件树的变化监测,从根组件开始单向向下,每个组件的变化监测器都会去执行变化的对比工作。而对于大部分组件来说,其输入属性很可能都是没有发生变化的,因此减少不必要的监测操作可以提升应用程序的性能。