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 **会在数据不断发生改变时重复触发（从而实现数据影响视图）
