vue的生命周期及不同阶段状态可以进行的行为

---

什么是vue的生命周期？

Vue 的实例从创建到销毁的过程 ，就是生命周期 ，也就是从开始创建 ，初始化数据 ，编译模板 ，挂载Dom到渲染DOM ，更新数据再到渲染 ，卸载等一系列的过程 ，我们称这是Vue的生命周期而这些Vue生命周期过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数。

---

一、vue生命周期示意图

二、Vue生命周期的作用是什么？

Vue生命周期过程中会伴随着多个事件钩子 ，这些钩子函数让我们在控制整个Vue实例的过程时更容易形成好的逻辑。Vue生命周期总共分8个阶段：创建前/后 ，载入前/后 ，更新前/后 ，销毁前/后。

1.创建阶段

在这个阶段，Vue 实例正在初始化，它会在内存中创建一个实例，并对实例进行初始化设置。在这个阶段，Vue 会调用一些特定的函数来创建实例，这些函数可以在组件中进行重写或自定义。

beforeCreate：
在实例被创建之前调用，此时组件实例的数据和方法都还未初始化。在这个阶段，通常可以进行一些全局变量或实例属性的初始化设置，可以加loading……事件 ，加载实列时触发。

created：
在实例创建之后调用，此时组件实例的数据和方法已经初始化完成，但尚未被挂载到 DOM 上。在这个阶段，通常可以进行一些数据的初始化、异步请求等操作，loading……事件结束等。

2.挂载阶段

在这个阶段，Vue 实例已经完成了初始化设置，并将组件挂载到了 DOM 上，可以进行渲染和交互了。

beforeMount：
在组件挂载到 DOM 之前调用，此时组件已经完成了模板编译，但还未将组件挂载到实际的 DOM 上。

mounted：
在组件挂载到 DOM 后调用，此时组件已经完成了渲染和挂载，可以进行 DOM 操作和交互。在这个阶段，通常可以进行一些依赖于 DOM 的操作，例如获取元素尺寸、绑定事件等，可以使用一些第三方的插件实例写在这个函数内。

3.更新阶段

在这个阶段，组件可能会被重新渲染，或者被销毁。在组件被重新渲染时，也会触发更新阶段的钩子函数。

beforeUpdate：
在组件更新之前调用，此时组件的数据已经发生了改变，但尚未重新渲染。在这个阶段，通常可以进行一些在数据更新前的操作，例如获取更新前的状态、进行异步请求等。

updated：
在组件更新之后调用，此时组件的数据已经重新渲染完成，可以进行 DOM 操作和交互。在这个阶段，通常可以进行一些依赖于 DOM 的操作，例如获取更新后的元素尺寸、重新绑定事件等。
 

4.销毁阶段

在组件被销毁时，会触发销毁阶段的钩子函数。

beforeDestroy：
在组件被销毁之前调用，此时组件实例还没有被销毁，但是已经从父组件中移除了。在这个阶段，通常可以进行一些清理工作，例如取消定时器、清除全局事件等。

destroyed：
在组件被销毁之后调用，此时组件实例已经完全被销毁，无法访问到组件的数据和方法。在这个阶段，通常可以进行一些最后的清理工作。

---

总结

要想学精vue，生命周期必须知道什么阶段进行了什么操作，我们可以在阶段上进行什么运算。vue八大阶段，可以让我们更好的理解起逻辑进行开发。