vue组件生命周期详解

Vue组件或者叫页面的生命周期，今天我们就一起来看看吧！

• 什么是组件生命周期
• 为什么要有组件生命周期
• Vue实例加载过程需要经历的阶段
• 钩子函数

一、什么是生命周期？

简单概括就是：一个组件或者“页面”加载过程中所经历的每个阶段。

二、为什么要有组件生命周期

因为有一些初始化操作，需要在组件或者页面加载完成之后就自动执行，不需要人为进行操作

三、Vue实例加载过程需要经历的阶段

仅以 new Vue() 举例，一共需要经历 四个阶段

1. 创建阶段（create）
2. 挂载阶段（mount）
3. 更新阶段（update）
4. 销毁阶段（destroy）

3.1、创建阶段（create）——必经阶段

创建阶段特点：
1、创建new Vue 对象
2、加载data 对象到new Vue() 中
3、暂时没有虚拟DOM树，无法执行DOM操作

3.2、 挂载阶段（mount）——必经阶段

挂载阶段的特点：
1、根据el所指扫描页面，并首次将data中的变量值渲染到页面显示
2、此阶段既有了data，又有了虚拟DOM树，既有可以操作data的变量，又可以对页面执行DOM操作

3.3、更新阶段（update）——只有data中变量被修改后才会自动触发

如果页面或者组件加载完成之后，没有修改页面中的数据，那么update阶段是不会被触发的

3.4、销毁阶段（destroy）——只有手动调用$destroy()函数，销毁当前组件时才自动触发

如果没有使用$destroy（）销毁组件或者页面，那么destroy阶段就不会被触发。

四、钩子函数

组件或页面每经历一个阶段，前后都会有一个类似钩子一样的函数，他们会自动触发。
非常类似于DOM中的事件处理函数。
每个阶段有2个，四个阶段一共有8个钩子。
因此钩子函数一共有8个。

何时会用钩子函数：只要希望在特定的生命周期阶段执行一些操作是，就可以把相关操作写到对应的生命周期的钩子函数中，才能自动触发，
比如：发送AJAX请求等，Vue中用的是axios发送AJAX请求

4.1、创建阶段的2个钩子函数

创建阶段前的钩子： beforeCreate()
创建阶段（create）
创建阶段后的钩子：created()

4.2、挂载阶段的2个钩子函数

挂载阶段前的钩子：beforeMount()
挂载阶段（mount）
挂载阶段后的钩子：mounted()

4.3、更新阶段的2个钩子函数

更新阶段前的钩子函数：beforeUpdate()
更新阶段（update）
更新阶段后的钩子函数：updated()

4.4、销毁阶段的2个钩子函数

销毁阶段前的钩子函数：beforeDestroy()
销毁（destroy）
销毁阶段后的钩子函数：destroyed()

**

总结：发送axios请求的时机应当放到mounted()函数中，因为此时既有data，又有虚拟DOM树。

**

如有误，请各位指正，万分感激！！！