VUE生命周期详解

每一个vue实例从创建到销毁的过程，就是vue的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

 首先：1.new Vue（）一个vue实例，然后init调用initLifecycle(), initEvents(), initRender()初始化了生命周期，事件以及定义createElement函数。

2.执行beforeCreate生命周期函数，此时无法通过vm访问到data中的数据、methods中的方法。

3.beforeCreate执行完后，会开始进行数据初始化，这个过程，会定义data数据，方法以及事件，并且完成数据监测与数据代理。

4.执行created生命周期函数，此时，我们可以通过vm访问data中的数据，methods中配置的方法。

5.created执行完后，判断当前是否有el参数，如果有就调用了 $mount方法，如果没有就只能自己手动调用了

6.判断当有template参数时，我们会选择去将template模板转换成render函数，如果没有template，那么我们就会直接将获取到的el，编译成templae, 然后再转换成render函数。此时网页还不能显示解析好的内容

7.beforMount，此时页面呈现的是未经Vue编译过的DOM结构，所有对DOM进行的操作，最终都不奏效

8.生产一个虚拟dom，进行保存，然后再开始将render渲染成为真实的dom，插入页面

9.调用mounted，我们是可以操作dom的，因为这个时候dom已经渲染完成了。页面所呈现的是经过Vue渲染的DOM。一般在此进行：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作。

10.当数据发生变化时,触发beforeUpdate，又会重新生成一个新的虚拟DOM，然后会拿这个最新的DOM和原来的旧的DOM去做一个比较。从而更新最新数据，再将更新后的render函数渲染成真实DOM。

11.beforeDestroy，此时还可以操作实例

12.beforeDestroy之后，一系列的销毁动作：如关闭定时器，解绑自定义事件，取消订阅消息等收尾操作

13.销毁完成后，再执行destroyed