基本概念

在 vue 的创建，使用，销毁过程中，会有许多事件，这些事件就被统称为生命周期函数，也叫作生命周期钩子。

vue 生命周期有 ：

1 beforeCreate(创建前)

2 created(创建后)

3 beforeMount(载入前)

4 mounted(载入后)

5 beforeUpdate(更新前)

6 updated(更新后)

7 beforeDestroy(销毁前)

8 destroyed(销毁后)

 生命周期的图片

 

---

Vue生命周期简要介绍

生命周期大致可以分成三种类型：

DOM构建/渲染前：beforeCreat、created、beforeMount、mounted

DOM渲染后：beforeUpdate、updated

离开页面：beforeDestroy、destroyed

DOM构建/渲染前阶段：

beforeCreate(创建前)：

当此生命周期函数执行的时候，vue实例还没有被完全创建出来，此时 data，methods 等内部没有初始化。

created(创建后)：

执行这个函数的时候，vue实例已经初始化了，可以在这里调用数据，不过还没渲染到页面上。 在当前函数中我们可以访问到data中的属性，此时，会将 data 中的属性和 methods 的方法添加到vue 的实例身上，同时会将data中所有的属性添加一个 getter/setter 方法。这里可以进行前后端上数据交互(ajax/axios请求的时候) 需要在当前生命周期中使用。

beforeMount(载入前)：

vue 已经将模板字符串编译成内存虚拟DOM，模板已经编译完成，已经完成渲染树，还没有渲染到页面上。

mounted(载入后)：

创建阶段完成，页面渲染完毕，进入运行阶段。此时我们可以通过 $refs 来访问到真实的 DOM 结构。ref 类似与 id 一样 值必须是唯一的，访问的时候我们可以使用 this.$refs. 属性，可以进行用户交互操作方法。

DOM渲染后阶段

当数据发生变化，比如触发了点击事件改动数据

beforeUpdate(更新前)：

此时页面中显示的数据还是旧的，但是 data 中的数据是最新的，且页面并未和最新的数据同步。

Updated(更新后)：

此时页面显示数据和最新的 data 数据同步。

离开阶段 

beforeDestroy(销毁前)：

出发这个函数时，还没开始销毁，此时刚刚脱离运行阶段。data 、methods，指令之类的都在正常运行。在这个生命周期函数中我们可以将绑定的事件进行移除，实例身上所有的 data，所有的methods以及过滤器…等都处于可用状态，并没有真正执行销毁。

destroyed(销毁后)：

此时组件以及被完全销毁，实例中的所有的数据、方法、属性、过滤器…等都已经不可用了。

总结：

1. Vue第一次页面加载会触发beforeCreate  created  beforeMount  mounted四个 钩子函数
2. DOM渲染在 mounted 这个周期就已经完成
3. 获取页面数据可以放在  created 或者 mounted  中 ，推荐把异步请求放在  mounted 中

---

文章如有错误，恳请大家提出问题，本人不胜感激 。 不懂的地方可以评论，我都会一一回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力     长路漫漫，道阻且长