了解vue的生命周期

谈到Vue的生命周期，相信许多人并不陌生。但大部分人和我同样，只是听过而已，具体用在哪，怎么用，殊不知道。我在学习vue一个多礼拜后，感受如今还停留在初级阶段，对于mounted这个挂载还不是很清楚。放大说，对vue的生命周期不甚了解，这对后面的踩坑是至关不利的。

由于咱们有时候会在几个钩子函数里作一些事情，何时作，在哪一个函数里作，咱们不清楚。因此，弄清楚生命周期是很是有必要的。

一、生命周期介绍

Vue实例有一个完整的生命周期，也就是从开始建立、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，咱们称这是Vue的生命周期。通俗说就是Vue实例从建立到销毁的过程，就是生命周期。

每个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。

下面是官方给咱们提供的流程图。

vue2.0生命周期

二、生命周期各个阶段

（1）组件实例刚刚被建立：实例、组件经过new Vue() 建立出来以后会初始化事件和生命周期，而后就会执行beforeCreate钩子函数，这个时候，数据尚未挂载呢，只是一个空壳，没法访问到数据和真实的dom，通常不作操做。

（2）实例已经建立完成：挂载数据，绑定事件等等，而后执行created函数，这个时候已经可使用到数据，也能够更改数据,在这里更改数据不会触发updated函数，在这里能够在渲染前倒数第二次更改数据的机会，不会触发其余的钩子函数，通常能够在这里作初始数据的获取。

（3）模板编译以前：接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，而后执行beforeMount钩子函数，在这个函数中虚拟dom已经建立完成，立刻就要渲染,在这里也能够更改数据，不会触发updated，在这里能够在渲染前最后一次更改数据的机会，不会触发其余的钩子函数，通常能够在这里作初始数据的获取。

（4）模板编译以后：接下来开始render，渲染出真实dom，而后执行mounted钩子函数，此时，组件已经出如今页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，能够在这里操做真实dom等事情...

（5）组件更新以前：当组件或实例的数据更改以后，会当即执行beforeUpdate，而后vue的虚拟dom机制会从新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比以后从新渲染，通常不作什么事儿。

（6）组件更新完毕：当更新完成后，执行updated，数据已经更改完成，dom也从新render完成，能够操做更新后的虚拟dom。

（7）组件销毁前：当通过某种途径调用$destroy方法后，当即执行beforeDestroy，通常在这里作一些善后工做，例如清除计时器、清除非指令绑定的事件等等。

（8）组件销毁后：组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里作善后工做也能够。