Vue的生命周期

引言

Vue生命周期图示

代码演示

总结

引言

在使用vue进行日常开发中，我们总有这样的需求，想在页面刚一加载出这个表格组件时，就发送请求去后台拉取数据，亦或者想在组件加载前显示个loading图，当组件加载出来就让这个loading图消失等等这样或那样的需求。

要实现这些需求，最重要的一点就是我怎么知道这个组件什么时候加载，换句话说我该什么时候向后台发送请求，为了解决这种问题，组件的生命周期钩子函数就应运而生。

Vue生命周期图示

下面这张图，就是Vue官网给展示的Vue生命周期图：

下面是官方文档给出的一个组件从被创建出来到最后被销毁所要经历的一系列过程，所以这个过程也叫做一个组件的生命周期图。从图中我们可以看到，一个组件从被创建到最后被销毁，总共要经历以下8个过程：

beforeCreate:组件实例创建之前

created：组件实例创建完毕

beforeMount：组件DOM挂载之前

mounted：组件DOM挂载完毕

beforeUpate：组件数据更新之前

updated：组件数据更新完毕

beforeDestoy：组件实例销毁之前

destoyed：组件实例销毁完毕

代码演示

演示代码：