Vue生命周期

Vue 实例从创建到销毁的过程，就是生命周期。Vue 所有的功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染，一个完整的vue生命周期会经历以下钩子函数

beforeCreate --- 创建前
created --- 创建完成
beforeMount --- 挂载前
mounted --- 挂载完成
beforeUpdate --- 更新前
updated --- 更新完成
beforeDestroy --- 销毁前
destroyed --- 销毁完成

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂 载实例到 DOM，在数据变化时更新 DOM 等。同时在这个过程中也会运行生命周期钩子的函数，目的是给予用户在一些特定的场景下添加他们自己代码的机会。

下图展示了实例的生命周期

首先，我们可以进行一下分类：

创建期间生命周期函数：beforeCreate，created，beforeMount，mounted
运行期间生命周期函数：beforeUpdate，updated
销毁期间生命周期函数：beforeDestroy，destroyed

然后，简单介绍一下：

创建阶段：
第一个生命周期函数：beforeCreat，当执行beforeCreate生命周期函数时，vue实例还没有被完全创建出来，此时data，methods等内部没有初始化，我们这个时候在函数内调用数据的话，后台会显示undefined。
第二个生命周期函数：created，执行这个函数的时候，vue实例已经初始化了，可以在这里调用数据，不过还没渲染到页面上。 在当前函数中我们可以访问到data中的属性，  更可以进行 axios 前后端分离 请求
第三个生命周期函数：beforeMount，这时，vue已经将模板字符串编译成内存DOM，模板已经编译完成，还没有渲染到页面上。
第四个：mounted，创建阶段完成，页面渲染完毕，进入运行阶段。 

运行阶段

当数据发生变化，比如触发了点击事件改动数据
beforeUpdate：内存中的数据已经改变，页面上的还没更新
updated：页面上数据和内存中的一致

销毁阶段

beforeDestroy：触发这个函数时，还没开始销毁，此时刚刚脱离运行阶段。data，methods，指令之类的都在正常运行。在这个生命周期函数中我们可以将绑定的事件进行移除
destroyed：组件销毁完毕，data，methods，指令之类的不可用。