首先，生命周期是个啥？
借鉴vue官网的一句话：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。
流程图
了解之前，我们先贴上一张官网的生命周期图，从图上，我们再一步一步来理解vue生命周期。
每个阶段都有两个生命周期钩子函数。
创建阶段beforeCreate，created:
可以看做一个vue实例生命的开始，可以把这一阶段比作组件从受精卵到胚胎的过程，这个阶段 vue组件开始初始化，vue开始观察数据，这个阶段有 beforeCreate 和 created 两个生命周期钩子函数。
挂载阶段beforeMount，mounted
这个阶段是vue实例的出生阶段，这个阶段将实现 DOM 的挂载，这标志着我们可以在浏览器里中看到页面了。
运行阶段beforeUpdate，updated
vue实例不可能一直保持不变，当vue实例中的数据发生改变时，DOM 也会发生变化。
销毁阶段beforeDestroy，destroyed
vue实例的消亡阶段。实例还可以被使用，直到destroyed()
首先，从图上，我们可以看出，他的一个过程是
- new Vue()实例化一个vue实例，然后init初始化event 和 lifecycle
- 执行beforeCreate生命周期函数
- beforeCreate执行完后，会开始进行数据初始化，这个过程，会定义data数据，方法以及事件
- 执行created生命周期函数，当这个函数执行的时候，我们已经可以拿到data下的数据以及methods下的方法了
- created执行 挂载阶段还没开始,也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。
- 继续往下走，判断当有template参数时，我们会选择去将template模板转换成render函数
- 再调用beforMount，也就是说实际从creted到beforeMount之间，最主要的工作就是将模板转换为render函数
- 调用beforeMount，开始渲染render函数
- 调用mounted，mounted函数内，我们是可以操作dom的，因为这个时候dom已经渲染完成了
- 只有当我们状态数据发生变化时,我们再触发beforeUpdat
- beforeUpdate调用之后，我们又会重新生成一个新的虚拟dom
- 执行updated，所以updated里面也可以操作dom，并拿到最新更新后的dom
- 执行beforeDestroy，实例销毁前，也就是说在这个函数内，你还是可以操作实例的
- 销毁完成后，再执行destroyed
上代码详细理解一下
<script>
beforeCreate() {
console.log('初始化前'）
//这个时候，在实例被完成创建出来，data没有初始化，不能访问data、method，一般在这个阶段不进行操作。
},
created () {
console.log('初始化完成')
//这个时候，vue实例中的data、method已被初始化，属性也被绑定，但是此时还是虚拟dom，真实dom还没生成，
//这个时候可以调用data和method的数据及方法，
//created钩子函数是最早可以调用data和method的，一般在此对数据进行初始化。
},
beforeMount () {
console.log('挂载前')
//此时模板已经编译完成，但还没有被渲染至页面中 在这里可以在渲染前最后一次更改数据的机会，
//不会触发其他的钩子函数，一般可以在这里做初始数据的获取。
},
mounted () {
console.log('挂载完成')
//此时模板已经被渲染成真实DOM，用户已经可以看到渲染完成的页面，
//这实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了
},
beforeUpdate () {
console.log('更新前')
//更新前状态（不是data中的数据改变前）重新渲染之前触发，
//然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染
},
updated() {
console.log('更新后')
//据已经更改完成，dom也重新render完成
},
beforeDestroy(){
console.log('销毁前')
//销毁前执行一般在这里善后:清除计时器、清除非指令绑定的事件等)
}，
destroyed(){
console.log('销毁后')
//Dom元素存在，只是不再受vue控制）,卸载watcher，事件监听，子组件。
}
</script>
打完收工。。。
欲知后事如何，敬请期待！！！
