Angular—生命周期函数
目录
一、概述
二、详解
三、实例
一、概述
生命周期函数也叫生命周期钩子,是组件在创建、更新、销毁时会触发的一系列方法。注意,Angular指令中也有生命周期函数,暂时忽略。
二、详解
Angular组件中主要有八个生命周期函数,如下所示。
constructor
使用简单的值对局部变量进行初始化。
ngOnChanges()
主要用在父子组件传值。父组件给子组件传值的时候,以及父组件改变传值数据的时候,会触发该函数。
ngOnInit(),重点掌握
在Angular第一次显示数据绑定和设置组件/指令的输入属性后,初始化组件或指令。在第一轮ngOnChanges()完成之后调用,只调用一次。使用该构造函数有两个原因。其一在构造函数之后马上执行复杂的初始化逻辑。其二在 Angular 设置完输入属性之后,对该组件进行准备。
ngOnInit主要用来做请求数据。
ngDoCheck()
了解即可,该函数在ngOnInt函数之后触发。ngDoCheck()中可以做一些自定义的操作,比如查看数据是否改变。
ngAfterContentInit()
组件挂载。组件渲染完成后触发。第一次ngDoCheck()之后调用,只调用一次。
ngAfterContentChecked()
组件初始化渲染完成后,做一些自定义操作。ngAfterContentInit() 和每次ngDoCheck()之后调用。
ngAfterViewInit(),重点掌握
视图挂载。组件视图及子视图初始化完成后调用,该函数一般进行dom操作。第一次ngAfterContentChecked()之后调用,只调用一次。
ngAfterViewChecked()
在ngAfterViewInit函数之后做一些自定义的操作。ngAfterViewInit()和每次ngAfterContentChecked() 之后调用。
ngOnDestroy(),重点掌握
组件销毁时触发。
三、实例
构造函数执行顺序
当页面加载时,生命周期函数触发顺序如下所示。
export class LifecycleComponent{constructor(){console.log("00,除了使用简单的值对局部变量进行初始化之外,什么都不应该做");}ngOnChanges(){console.log("01,当被绑定的输入属性值发生变化时调用(父子组件传值时触发));}ngOnInit(){console.log("02,请求数据一般放在这里面"); }ngDoCheck(){//写一些自定义操作console.log("03,检测,并在发生Angular无法或不愿意自己检测的变化时作出反应);if(this.userinfo!==this.oldUserinfo){console.log(`你从${this.oldUserinfo}改成${this.userinfo}`);this.oldUserinfo = this.userinfo;}else{console.log("数据没有变化"); }}ngAfterContentInit(){console.log("04,当把内容投影进组件之后调用);}ngAfterContentChecked(){console.log("05,每次完成被投影组件内容的变更检测之后调用");}ngAfterViewInit(){console.log("06,初始化完组件视图及其子视图后调用(dom操作放在这里面)");}ngAfterViewChecked(){console.log("07,每次做完组件视图及其子视图的变更监测之后调用");}ngOnDestroy(){console.log("08,组件销毁时调用");}}
绑定数据改变时触发的生命周期函数
<h2>{{msg}}</h2>
<button (click)="changeMsg()">改变msg的值</button>
changeMsg(){this.msg="数据改变了";
}// 数据改变后触发如下三个生命周期函数
ngDoCheck(){ }
ngAfterContentChecked(){ }
ngAfterViewChecked(){ }
带有check的生命周期函数,只要数据改变就会触发,比如input输入框输入数据时。带有Init的生命周期函数只会触发一次。
Angular—生命周期函数相关推荐
- Vue生命周期函数详解
生命周期图 生命周期方法 var vm = new Vue({el: '#app',data: {msg:'ok'},methods: {show:function () {console.log(& ...
- react生命周期函数
在react中,生命周期函数指的是组件在加载前,加载后,以及组件更新数据和组件销毁时触发的一系列方法.通常分为以下几类: 组件加载的时候触发的函数:constructor .componentWill ...
- uniapp里的mounted_uni-app 生命周期函数执行顺序
{{message}} 点击 import { mapState, mapMutations } from 'vuex'; var key = 0; export default { data() { ...
- 小程序的生命周期函数?
onLoad Function 生命周期函数--监听页面加载 onReady Function 生命周期函数--监听页面初次渲染完成 onShow Function 生命周期函数--监听页面显示 on ...
- vue源码解析pdf_Vue源码全面解析八 callHook函数(触发生命周期函数)
首先我们打开'src/core/instance/lifecycle.js'文件,代码如下: export function callHook (vm: Component, hook: string ...
- vue openlayer单击地图事件循环多次执行_VUE生命周期函数面试题
什么是 vue 生命周期 vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重 ...
- reactjs组件的生命周期函数:getSnapshotBeforeUpdate更新之前获取快照
reactjs组件的生命周期函数:getSnapshotBeforeUpdate更新之前获取快照
- reactjs组件的生命周期函数:getDerivedStateFromProps
reactjs组件的生命周期函数:getDerivedStateFromProps
- 【视频】vue生命周期函数
P15vue生命周期函数 https://www.bilibili.com/video/av91679349?p=15
- 七十七、React中的propTypes,defaultProps和生命周期函数
2020/11/19. 周四.今天又是奋斗的一天. @Author:Runsen React,相比于Vue,React更加灵活,但是对JavaScript基础的要求也更高一些.我继续学习React 文 ...
最新文章
- STM32F0xx_EXIT中断配置详细过程
- fmt.Println、fmt.Printf、fmt.Sprintf、fmt.Sprintln
- 哄骗DB2look 重新创立优化器访问筹划(3)
- 中关村-DIY高清之HDMI线导购
- 基础算法 —— 高精度计算 —— 高精度除法
- XsdGen:通过自定义Attribute与反射自动生成XSD
- 深入分析同步工具类之AbstractQueuedSynchronizer
- 设计模式开闭原则--java
- Putty CentOS SSH 总是自动断开连接
- Oracle设置主键自增
- 圈点2006年的省级卫视
- 阳光牧场助手 阳光牧场外挂
- 接口测试一般怎么测?接口测试的流程和步骤
- 学习黑马JVM的笔记
- python自动化测试培训脱产_柠檬班python自动化测试课程完整版
- 阿里巴巴的合伙人制度!
- 在线计算机励志文案,让人充满动力的经典励志文案
- 如何使用Windows10自带的photo应用给视频添加字幕
- 内网渗透之抓取隔壁小姐姐上网图片
- OpenLayers 调用 Tomcat 发布的栅格切片服务