Vue生命周期

创建前（beforeCreate）

此阶段为实例初始化之后，此时data 和 methods 中 数据都还没有初始化，不能获得DOM节点。

创建后（created）

在这个阶段vue实例已经创建，此时data 和 methods 中 数据已经初始化，但仍然不能获取DOM元素。（要调用 methods 中的方法或操作 data 中的数据， 最早只能在 created中请求数据）

载入前（beforeMount）

在这一阶段，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。
此时，虽得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；
**注意：**这个阶段是过渡性的，一般一个项目只用一次两次。

载入后（mounted）

一旦被触发，表示初始化已经完成，页面模板已经存在，就可以向里边填充数据。可以调用后台接口，处理数据。但在服务器渲染期间不被调用。
使用最多的函数，一般异步请求都写mounted。在这个阶段，数据和DOM都已被渲染出来。
如果要通过某些插件操作页面上的DOM节点，最早要在 mounted 中进行

更新前（beforeUpdate）

在这一阶段，vue遵循数据驱动DOM的原则；页面中的显示的数据还是旧的，但此时 data 数据是最新的，页面尚未和最新的数据保持同步。
这是Vue双向数据绑定的作用。

更新后（updated）

此时，DOM会和更改过的内容同步。

销毁前（beforeDestroy）

在上一阶段vue已经成功的通过数据驱动DOM更新，当不在需要vue操纵DOM时，就需要销毁Vue。即清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。
销毁前触发

销毁后（destroyed）

销毁后触发
如图所示：（图片来源于 https://blog.csdn.net/su2231595742/article/details/115186957）

在组件开发的过程中贯穿了vue的整个生命周期。掌握VUE生命周期的不同钩子函数的调用时刻，可以很好地控制控制数据流和其对DOM的影响。