Vue生命周期解析及相应事件

生命周期： 

Vue是一个构造函数，当执行这个函数时，相当于初始化vue实例；

在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，

而在这个初始化过程中，Vue又会在不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；

首先我们来结合Vue官方提供的图看一下Vue生命周期到底发生了些啥

beforeCreate   

data和methods未初始化(loading事件)

created（已创建）

data、methods初始化完成，如果调用数据或方法最早只能在created中操作

此时拿不到DOM元素

(后台数据请求和耗时操作)

beforeMount   

vue模板已经在内存中渲染好了，但还没有挂载到页面中，此时页面还是旧的

（render 被初次调用用于生成虚拟dom）

mounted（已安装）

页面和内存的数据已经同步， 只要执行完mounted，就表示整个Vue实例已经初始化完毕。

(dom树已渲染到页面，最早可以在mounted中操作DOM)

beforeUpdate  

页面中显示的数据是旧的，data的数据已经是最新的，页面显示未和数据同步。

（data的数据发生改变会执行这个钩子）

update（已更新） 

更新DOM完成,页面数据更新

（执行依赖于 DOM 的操作。每次进行数据更新时updated都会执行）

beforeDestroy

实例数据还都是可用状态

（确认删除XX吗？）

Destroyed   

组件已经销毁不可用 （

执行一些优化操作,清空定时器。）