生命周期钩子函数，单从这个字面上理解，似乎不太易懂，我们来看vue的官网中介绍的：“每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数。”。看这些，也许并不那么好理解，我们可以类比原生js里类似的行为，onload事件:

`

<script>window.onload = function () {console.log('DOM加载完毕才执行js')}
</script>
复制代码

`

上面是一个很简单的onload应用，w3c官网解释为：onload 事件会在页面或图像加载完成后立即发生,相信大家对它不陌生，也都会用。而vue的生命周期，或者说其它框架，react, angular，都是类似于这样的概念。比如vue的：created:

`

new Vue({data: {a: 1},created: function () {    // 这个是实例创建后的生命周期函数// `this` 指向 vm 实例console.log('a is: ' + this.a)}
})
复制代码

`

上面这个例子就是说，vue实例创建后，如果用es5面向对象的语法解释就是var instarce = new Vue() ,也就是说我们new 完后拿到这个实例时触发的一个行为。angular创建实例后的初始化就是ngOnInit,react里的就是componentWillMount。

那么这三大框架各自都有哪些生命周期函数呢，它们的执行顺序是怎样的呢？下面看各自的介绍：

Vue生命周期函数：

vue生命周期函数，共有八个，执行顺序如下：

• beforeCreate 实例创建前；
• created 实例创建后；
• beforeMount 挂载DOM前；
• mounted 挂载DOM后，这个是最接近onload事件的；
• beforeUPdate 数据更新前；
• updated 数据更新后；
• beforeDestroy 实例销毁前；
• destroyed 实例销毁后；

这八个生命周期函数，根据不同的业务需求，去写你的业务逻辑。在这里最常用的主要就是created和mounted这两个了。vue官网生命周期；

React生命周期函数：

react生命周期函数，执行顺序如下：

1. 组件加载时执行的生命周期函数：

• constructor 构造函数执行
• componentWillMount() 组件初始化时调用；
• render() 创建虚拟dom;
• componentDidMount() 组件渲染后调用，也就是我们操作react dom时；

2. 组件数据更新的时候触发的生命周期函数：

• componentWillReceiveProps() 父组件改变props传值的数据时调用；
• shouldComponentUpdate(nextProps, nextState) 组件接受新的state或者props时调用;
• componentWillUpdate() 组件将要更新时调用;
• render() 组件渲染；
• componentDidUpdate(); 组件更新完成时调用；

3. 组件实例销毁时执行的生命周期函数：

• componentWillUnmount() 组件销毁时调用。

注意：shouldComponentUpdate(nextProps, nextState)生命周期函数是react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候使用。react生命周期函数官网。

Angular生命周期函数

angular生命周期执行顺序以及应用时机：

• ngOnChanges() 当 Angular（重新）设置数据绑定输入属性时响应;
• ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件;
• ngDoCheck() 检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应;
• ngAfterContentInit() 每当 Angular 把外部内容投影进组件/指令的视图之后调用；
• ngAfterContentChecked() 每当 Angular 完成被投影组件内容的变更检测之后调用;
• ngAfterViewInit() 每当 Angular 初始化完组件视图及其子视图之后调用;
• ngAfterViewChecked() 每当 Angular 做完组件视图和子视图的变更检测之后调用;
• ngOnDestroy() 每当 Angular 每次销毁指令/组件之前调用并清扫。

angular生命周期函数官网。

小结

生命周期钩子函数，其实指的就是我们的组件实例化构建页面的一个过程和执行顺序，然后根据每个阶段去做相应业务逻辑的处理，完成我们的业务需求以及功能上的开发。本章节本人也是主要参考这三大框架的文档来写的，更多的目的是帮助前端小白同学快速建立对生命周期这个概念的认识，如有不足烦请指正，谢谢。