Vue的生命周期

什么是Vue的生命周期 ？

Vue 的实例从创建到销毁的过程 ，就是生命周期 ，也就是从开始创建 ，初始化数据 ，编译模板 ，挂载Dom到渲染DOM ，更新数据再到渲染 ，卸载等一系列的过程 ，我们称这是Vue的生命周期。

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

从创建到销毁顺序执行的生命周期函数 :beforeCreate、created、 beforeMount、mounted、beforeUpdate、 updated、beforeDestroy、destroyed
而这些Vue生命周期过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数。

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

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

各个生命周期函数的作用：

创建前/后(beforeCreate / created)

在beforeCreate阶段 ，vue实例的挂载元素el和数据对象data都为undefined ，还未初始化 ，也就是说此时我们还拿不到数据

在created阶段 ，vue实例的数据对象data有了 ，但是实例对象el还没有 ，也就是说可以拿到数据 ，但是无法获取Dom节点 ，此时data 和 methods已经可以使用 但是页面还没有渲染出来

created阶段data有了才能拿到数据

所以我们在开发中 ，的一些获取数据的逻辑都可以写在created钩子函数中

载入前/后 （beforeMount / mounted）

在beforeMount阶段 ，vue实例的$el和data都初始化了 ，但还是挂载之前的虚拟DOM节点 ，此时实例尚未挂载完成 ，此时页面上还看不到真实数据 只是一个模板页面而已

在mounted阶段 ，vue实例挂载完成 ，页面成功渲染数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件

mounted页面才真正渲染完成

created拿不到elDom节点
注意：在beforeMount阶段 可以拿到el实例但是只是挂载的el虚拟DOM节点 ，在mounted阶段 el被新创建的vm.$el替换，并挂载到实例上此时才能操作页面上的DOM元素。

以上四个钩子函数都是在Vue生命周期过程中自动调用。

更新前/后 （beforeUpdate / updated）

在beforeUpdate 阶段 ，数据更新时调用，发生在虚拟DOM打补丁之前 页面上数据还是旧的。

在updated阶段 ，由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的，只有在数据改变后才调用。

销毁前/后 （beforeDestroy / destroyed）

beforeDestroy在实例销毁之前调用 ，在这一步，实例仍然完全可用。

destroyed 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

页面第一次加载只会调用触发 beforeCreate created beforeMount mounted

每个阶段对应的钩子函数 ，我们都可以在其内部做一些对应的逻辑。

【常用钩子函数的运用场景】

【beforeCreate 】此时页面开始创建 ，可以加loading等事件

【created 】加载实列触发或 一些异步请求调用 ，loading结束等事件

【mounted 】获取Dom节点操作DOM ，在这个钩子函数里面我们可以使用一些第三方的插件实例写在这个函数内

【updated】 做一些数据统一更新处理的相应函数