vue生命周期

生命周期钩子函数	组件状态	常见用法
beforeCreate	this指向创建的实例，还不能访问data，computed，methods等	初始化非响应式变量
created	可以访问data，methods：但是未挂载到DOM，并且还不能访问$el属性，$el属性内容此时为空数组	简单的ajax请求，页面的初始化
beforeMount	在beforeMount之前，会找到对应的template，并编译成render函数	-
mounted	vue实例挂载到了DOM上，$ref.$el均可以访问	获取VNode信息，ajax请求
beforeUpdata	data发生变化，即DOM发生改变	适合在更新之前访问现有的DOM，如手动移除已添加的事件监听器
updated	组件DOM已经更新，可执行依赖于DOM的操作	在这个钩子函数中操作数据，可能陷入死循环。尽量避免
beforeDestroy	实例销毁之前调用。此时，实例依然可以使用，this可以获取到实例	常用与销毁定时器，解绑全局事件，销毁插件对象等
destroyed	实例销毁后调用，调用后，vue实例数据解除绑定，事件监听器被移除，子实例都被销毁	-

---

1 new Vue()新建vue实例

2 初始化  事件&生命周期

（刚刚初始化一个空的Vue实例对象，此时，在这个对象上，只有一些默认的生命周期函数和默认的事件，其他的均未创建）

 （1）beforeCreate 创建vue实例前的钩子函数

3 初始化   注入$校验

（初始化data和methods）

 （2）created 实例创建完成之后的钩子函数

4 是否指定“el”选项 ？                            

4.1               是                                                                否    当调用vm.$mount(el)函数时

4.12                                    是否指定 “template”选项？         

5                  是                                                                否 

              编译模板：把data对象里的数据与vue语法写的模板编译成html

将template编译到render函数中                   将el外部的HTML作为template编译

  （3）beforeMount  开始挂载编译生成的HTML到对应位置时触发的钩子函数。但：此时还未将编译出的HTML渲染到页面上

6 创建vm.$el 并用其替换“el”

将编译好的HTML替换掉el属性所指向的dom对象或替换对应HTML标签里的内容

  （4）mounted 将编译好的HTML挂载到页面完成后执行的钩子函数，此时可以发送ajax请求获取数据的操作进行数据初始化，但，mounted在整个实例声明内只执行一次

7 挂载完毕   虚拟DOM重新渲染并应用更新

 （5）beforeUpdate 当data被修改时 实时监控data里面的数据变化，以便随时更新

 （6）update  updated执行时，页面和data数据已经保持同步，都是最新的 当data被修改时 实时监控data里面的数据变化，以便随时更新  

当调用 vm.$destroy（）函数时

 （7）beforeDestroy Vue实例销毁之前执行的钩子函数 当执行beforeDestroy钩子函数时，vue实例就已经从运行阶段进入销毁阶段，此时，组件中所有data，methods，以及过滤器，指令等，都处于可用状态，此时还未真正执行销毁过程 vue实例销毁执行的钩子函数

 8 解除绑定 销毁子组件以及事件监听器

 （8）destroyed 当执行destroyed函数时，组件已经被完全销毁，此时组件中所有data，methods，以及过滤器，指令等，都已经不可用了

  9 销毁完毕