Vue生命周期钩子函数简述

生命周期

vue 实例或组件（组件本质上就是一个具有预定义选项的实例）创建到销毁的一系列过程，就叫做生命周期。

生命周期的钩子函数

在生命周期不同的阶段中会自动执行的函数，就叫做生命周期的钩子函数

生命周期的三个大阶段及其钩子函数

1. 初始化挂载阶段
   1. beforeCreate
   2. created
   3. beforeMount
   4. mounted
2. 更新阶段
   1. beforeUpdate
   2. updated
3. 销毁阶段
   1. beforeDestroy
   2. destroyed

beforeCreate

实例创建之前

1. 一个生命周期过程中，只会触发一次
2. 获取不到挂载点元素和data数据
3. 一般没什么作用，但硬要去杠的话也是可以发送ajax的，因为 ajax 是异步的操作，异步完成的时候，生命周期进入了后续阶段(mounted 都完成了)，所以在后续阶段中是可以去修改 data 中的数据的。

created

实例创建完成

1. 一个生命周期过程中，只会触发一次
2. 能获取到 data 选项中的数据了，能调用 methods 选项中函数了。
3. 获取不到挂载点元素
4. 一般在这里发送 ajax 请求获取页面一打开就需要的数据

beforeMount

实例挂载之前：相关的 render 函数首次被调用。

挂载的意思是：vue 解析模板数据完成，并替换到真实的DOM上面。

1. 一个生命周期过程中，只会触发一次
2. 通过 vm.$el 获取不到真实的DOM
3. 一般没什么作用，不用去操作它。

mounted

实例挂载完成

1. 一个生命周期过程中，只会触发一次
2. 能够获取到真实的DOM
3. 初始化与DOM相关的操作可以放在这儿。比如 Swiper 的实例化。

beforeUpdate

实例更新之前

1. 一个生命周期过程中，可能会触发多次
2. 能得到数据更新之前的DOM，但是得不到数据更新之后的DOM
3. 一般不要在这里去修改数据，也不要去发送异步请求 ，会进入死循环
4. 一般没什么作用，不用去操作它。

updated

实例更新完成

1. 一个生命周期过程中，可能会触发多次。
2. 能得到数据更新之后的DOM。
3. 一般不要在这里去修改数据，也不要去发送异步请求 ，会进入死循环
4. 一般用于真实DOM更新之后的操作，比如 Swiper 的更新。

beforeDestroy

实例销毁之前

1. 做一些销毁工作，比如 计时器的清除、全局事件绑定的销毁等工作。

destroyed

实例销毁完成

1. 这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
2. 一般没什么作用，不用去操作它。