Angular更新机制(一):Angular的生命周期
了解Angular的更新机制之前,首先需要了解Angular的每个生命周期
Angular的生命周期分为以下几个(按顺序进行调用)
ngOnChanges()
ngOninit()
ngDoCheck()
ngAfterContentInit()
ngAfterViewInit()
ngAfterViewChecked()
ngOnDestroy()
ngOnChanges
首次构造组件的时候一定会调用。并且接收一个SimpleChange对象,包含了变换前后的值在这个生命周期时,@Input的属性值会在该生命周期赋给组件
- ngOnChanges只有在输入属性(@Input修饰的)变化时会调用该生命周期。
- 子组件的输入属性(基础数据类型)变化时触发这个钩子(引用类型属性变化时不会触发,引用类型会通过Angular的变化机制更新数据)
ngOninit
该生命周期在ngOnChanges之后,并且只会在组件的第一次ngOnChanges之后调用。一般在这个生命周期中来获取数据,减少构造函数的复杂性。
ngDoCheck
该生命周期,会在每次变化检测时调用。无论组件本身的数据是否发生了变化(每个异步事件都会触发组件的变化检测)
,每个变化周期ngDoCheck都会被调用。所以尽量不要在这个生命周期做很复杂的事情。
ngAfterContentInit
在组件中使用了<ng-content>嵌入了外部内容,Angular会在第一次ngDoCheck执行之后调用该生命周期,并且只调用一次
ngAfterContentChecked
与上面的ngAfterContentInit相对应,在组件中使用了<ng-content>嵌入了外部内容,第一次执行ngAfterContentInit之后和每次变化检测都会调用该生命周期。挺像ngDoCheck的。
当父组件和子组件都有投影内容时,会先执行父组件的ngAfterContentInit和ngAfterContentChecked之后,在执行子组件的这两个生命周期
ngAfterViewInit
Angular创建了组件的视图和子视图之后被调用(组件本身和所有的子组件渲染完成,已经呈现在页面上)
ngAfterViewChecked
第一次执行ngAfterViewInit和在每个变化检测都会被调用
当父组件和子组件都发生视图变化时,会先执行子组件的ngAfterViewInit和ngAfterViewChecked生命周期钩子,与contentInit和contnentChecked相反
ngOnDestroy
组件销毁前调用