Angular更新机制(一):Angular的生命周期

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

组件销毁前调用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。