有些同学在网上搜索，全是官方文档的生命周期流程图，看完总时似懂非懂，有的叙述模糊，有的不完整，甚至时有的无法理解。
这一次，我根据个人的了解，手动实现一个生命周期的画图，算是基本摸懂了Vue的生命周期过程
vue生命周期生成到编译环境的选项 如下图：
在将生命周期前，我们先知道，生命周期的钩子函数是什么?
那就是在整个生命周期中，主动执行的函数，称为钩子函数
1.在new Vue实例化后会自动执行初始化函数，会初始化事件，生成vue实例的整个生命周期，这个时候就有整个生命周期
2.执行初始化前beforeCreate 这个生命周期的钩子函数无法进行如何的操作，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。可以理解为只是走一个流程
3.进入到初始化中，这个时候会初始化data和props，并且给数据绑定上对象劫持（vue的核心）不知道对象劫持的同学可以去搜索一下，必须先弄懂这个东西
4.初始化结束created 这个时候，我们可以通过它获取到data数据了，并且可以得到一个“假”的HTML，但不会在页面展示，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom
5.来到编译环境的选项，是否有el或template，根据编译选项作为模板并且将数据和compile函数（编译函数）进行结合，创建出虚拟DOM，对象。
从生命周期的生成到编译环境的选项，我们基本了解完了上半部分
接下来，我们了解数据如何在页面的流程，下半部分的内容，如下图：
在编译环境到生成虚拟DOM后，就会来到数据挂载的生命周期钩子函数。
6.数据挂载前 beforeMount 在这个钩子函数中，我们可以获取到数据，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。
7.挂载中，会生成 $el(自行查解)，并且替换掉原有的编译模板，生成一个真正可用的HTML
8.数据挂载后 mounted 将HTML显示到页面，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。
在mounted下，会有2个生命周期钩子函数，那就是数据更新阶段的钩子函数
9.beforeUpdate 页面数据更新之前，监听数据的改变，并且可以获取到最新的数据，但是不会更新页面的数据
10.更新中 将最新的数据重新渲染更新DOM，并且执行compile 和打补丁（只改变数据影响的内容，其他不会改变）
11.updated数据更新完毕 在这个生命周期钩子函数中 我们可以获取到当前最新的数据（也就是页面中的最新数据）当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新
销毁阶段的生命周期钩子函数
1.在触发 $destroy( ) 函数后，就会触发销毁阶段
2.beforeDestroy 销毁之前 还是可以使用HTML的，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器，销毁父组件对子组件的重复监听。beforeDestroy(){Bus.$off("saveTheme")}
3.销毁中 终止对象劫持（最主要）子组件，事件
4.destroyed 销毁之后 组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
vue的整个生命周期过程执行完毕，我们会发现两个问题？
第一个问题 除了beforeCreated无法获取到数据之外，其他钩子函数都可以获取到数据
而仅仅只有 beforeUpdate和updated获取到的是最新的数据
第二个问题 beforeUpdate和updated 会在数据不断发生改变时重复触发（从而实现数据影响视图）
