vue必须了解的生命周期

vue生命周期图

什么是Vue生命周期
Vue实例对象从创建到销毁的过程，就是生命周期。从开始创建、初始化数 据、编译模板、挂载DMO–>渲染、更新—>渲染、销毁等一系列过程，称之为Vue的生命周期

首先，每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧（有标记），相信大家一定都会很熟悉

1、通过var vm = new Vue({})创建一个vue实例对象vm
2、初始化事件: 这里只有一些默认的生命周期函数和默认的事件，其他的都还没有创建
3、beforeCreate执行时，data和methods都还没有初始化。
4、开始初始化data和methods。
5、created执行时，data和methods都已经存在了，但是还没有挂载到界面去。
6、红框中的内容表示Vue开始编辑模板，把Vue代码中的那些指令进行执行，最终，在内存中生成一个编译好的最终的模板字符串对象，然后把这个字符串对象，渲染为内存中的DOM，此时，只是在内存中渲染好了模板，并没有把模板挂载到真正的页面中去 。
7、beforeMount函数执行时，模板已经在内存中编译好了，但尚未挂载到页面中去，此时，页面还是旧的
8、将内存中编译好的模板，真实的替换到浏览器的页面中去
9、mounted是在页面加载完成后执行的函数，如果要操作页面上的DOM节点，最早是在mounted中进行。
10、执行完了mounted，就表示整个Vue实例对象已经初始化完毕了，此时组件已经脱离创建阶段，进入运行阶段。
11、绿框中是组件的运行阶段， 运行阶段的声明周期函数只有两个：beforeUpdata和updated，这两个事件会根据data数据的改变，有选择的触发零到多次
12、当执行完beforeUpdate时，页面中显示的数据还是旧的，此时data中的数据是最新的，页面数据还没有和data中最新数据同步
13、这一步，先根据data中最新的数据，在内存中，重新渲染出一份最新的内存DOM数，当内存DOM数被更新之后，会把最新的内存DOM树，重新渲染到真实的页面当中，这是，就完成数据从data(model层)->view(视图层)的更新
14、updated执行时，页面和data数据已经保持同步，都是最新的
15、当执行beforeDestroy函数时，销毁了VM和V层之间数据和方法（关系）的绑定。组件中所有data、methods、以及过滤器，指令等，都处于可用状态，
16、当执行destroyed函数时，组件已经被销毁，此时组件中所有data、methods、以及过滤器，指令等，都已经不可用了

需要发送数据请求的话，一般是选择在 created或mounted这两个阶段

第一次加载页面会 触发 beforeCreate， created， beforeMount， mounted这四个钩子

Vue生命周期的作用是什么？
它的生命周期中有多个时间钩子，让我们在控制整个VUe实例的过程时更容易形成好的逻辑