vue的生命周期

一、分类

1、以阶段为例分为4个阶段：

1. 初始化阶段
2. 挂载阶段
3. 更新阶段
4. 销毁阶段

2、以钩子为例分为8个钩子：

1、beforeCreate()

2、created()

3、beforeMount()

4、mounted()

5、beforeUpdate()

6、updated()

7、beforeDestroy()

8、destroyed()

二、概念

vue生命周期钩子：vue从初始化到销毁的过程中会执行的函数。

beforeCreate()：初始化vue实例,还没有创建data。

created()：创建了data,还没有创建el挂载点。
常用(最早操作data的钩子): 页面加载渲染数据,在这个钩子里面发送ajax。

beforeMount()：创建了el挂载点,还没有把data渲染到el上。

mounted()：第一次把data渲染到el上。
常用(最早操作dom的钩子): 完成初始渲染。

beforeUpdate()：data数据更新,还没有重新渲染。

updated()：完成dom更新(重新渲染了data数据)。

beforeDestroy()：vue开始销毁,会移除侦听器 子组件 绑定事件。
有两种情况可以触发beforeDestroy()钩子：
1、组件自己v-if为false
2、调用组件自己$destroy()方法
应用：移除setInterval定时器

destroyed()：vue完成销毁。

三、注意点

1、vue初始渲染会执行哪些钩子：

beforeCreate()
created()
beforeMount()
mounted()

2、vue用的最多的钩子：

created() :  一般用于发送ajax（页面一加载需要发送ajax在这个勾子）
mounted() :  一般用于操作DOM（页面一加载需要操作DOM在这个勾子）

3、vue会反复执行的钩子：

beforeUpdate()
updated()