Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列
过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。
生命周期小结
生命周期钩子的一些使用方法：
我的总结：
1、mounted只会在加载页面的时候执行一次
2、created:会多次执行
3、updated:如果需要对渲染完成的dom树进行操作，可以在update里进行
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数 。如果需要对渲染完成的dom树进行操作，可以在update里进行
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom
代码实例生命周期、钩子函数： 转载自：https://www.jianshu.com/p/ea452d3a1671
https://segmentfault.com/a/1190000008570622
https://www.cnblogs.com/fly_dragon/p/6220273.html
vue2.x————生命周期与钩子函数
兲坈 关注
2017.05.26 20:28* 字数 1209 阅读 353评论 0喜欢 8
vue2.x————生命周期与钩子函数
前言
现在已经越来越多的人开始使用vue了，vuex+vue-router+axios进行开发成为了趋势，很多人能够快速的进行开发以及和后端做数据的交互，但是对于所谓的生命周期就不知道是什么东西了。于是经过查看API文档以及网上众多的文章查询，还有亲身试验，总结了一下以下经验
vue1.x 与 vue2.0的生命周期是有区别的，但基本上我们都是使用vue2.0，如果之前使用了1.x版本开发的小伙伴可以去官网查看一下如何迁移vue官方文档（从vue1.x迁移）
vue1.x钩子函数可以总共分为9个阶段：
- init ----- 在实例开始初始化时同时调用。此时数据观测。事件和watcher都尚未初始化。
- created ----- 在实例化创建之后会不调用，此时实例已经结束解析选项，已建立:数据绑定、计算属性、方法、Watcher/事件回调，但是还没有开始DOM编译，$el还不存在
- beforeCompile ----- 在编译开始前调用
- compiled ----- 在编译结束后调用。此时所有指令已经生效，因此数据的变化将触发DOM更新，但$el的数据尚未渲染到页面上
- ready ----- 在编译结束和$el第一次插入文档后调用
- attached ----- vm.$el插入Dom时调用
- detached ----- vm.
el不会触发
- destroyed ----- 在实例被销毁之后调用，此时所有的绑定和实例的指令已经解绑，所有子实例已经销毁
9.destroyed ----- 在实例开始销毁之后调用，此时所有的绑定和实例的指令已经解绑，所有实例已经销毁
vue2.0钩子函数可以总共分为8个阶段
- beforeCreate（创建前）----- 2.0版本中新增beforeCreate,在实例初始化之后，数据观察(data observer)和event/watcher事件配置之前被调用。
- created（创建后）
- beforeMount(载入前) ----- 2.0版本中新增beforeMount，是在Watcher之前、模板编译成render方法之后调用，相关render首次被调用。该钩子函数在服务器渲染期间不被调用。
- mounted（载入后）
- beforeUpdate（更新前） ----- 2.0版本中新增beforeUpdate,是在DOM树生成之前、虚拟DOM树生成之后调用，调用条件是这个vm实例已经mounted过。该钩子函数在服务器渲染期间不被调用。
- updated（更新后）----- 2.0版本中新增updated，在DOM树生成之后调用，调用条件是这个vm实例已经mounted过。该钩子函数在服务器渲染期间不被调用。
- beforeDestroy（销毁前）
- destroyed（销毁后）
现在的vue最新的版本是2.3.3 基本上与 vue2.0差距不大，在生命周期与钩子函数上基本一样
下面将结合代码去看看钩子函数的执行顺序
HTML代码部分
<div id="app">
<input type="text" v-model='message' name="" id="" value="" />
<div>{{message}}</div>
</div>
js代码部分
beforecreate:
var app = new Vue({
el: '#app',
data: {
message: "my name is shalien"
},
beforeCreate:function () {
console.group('beforeCreate 创建前状态=========》');
console.log( "el : " + this.$el); //undefined
console.log("data : " + this.$data); //undefined
console.log("message: " + this.message)
},
created:function () {
console.group('created 创建完毕状态===========》');
console.log("el : " + this.$el); //undefined
console.log("data : " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
},
beforeMount:function () {
console.group('beforeMount 挂载前状态=========》');
console.log("el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("data : " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
},
mounted:function () {
console.group('mounted 挂载结束状态==========》');
console.log("el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("data : " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
},
beforeUpdate:function () {
console.group('beforeUpdate 更新前状态=========》'); console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
updated:function () {
console.group('updated 更新完成状态===========》'); console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
beforeDestroy:function () {
console.group('beforeDestroy 销毁前状态=========》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
destroyed:function () {
console.group('destroyed 销毁完成状态==========》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message)
}
}
在浏览器中进行运行，就会出现我们看到各个时间段的触发，我这里使用的是Chrome浏览器，在控制台中进行输出的样子显示出嵌套的结构，看起来非常的清晰
beforecreated:el和data尚未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化 在挂载前状态的时候获取的el值里面还是只有表达式{{message}}这个是使用了虚拟dom技术占据位置，当mounted挂载的时候再把值渲染进去
mounted ：完成挂载
当数据发生变化时，如更改data里的message 的值
可以看到，当message里的值被修改的时候，触发updata的函数
destroy销毁
我们可以通过app.$destroy对vue的实例进行销毁，销毁完成之后该实例将不会对所挂载的函数进行响应，但是原本生成的dom元素及渲染出来的值还是存在的，执行了detrory操作之后，vue将不能控制
生命周期大概就是这些，那么应该在什么时候使用什么函数呢，这个还是那句，看情况而定例如在
beforecreate : 可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory： 你确认删除XX吗？
destoryed ：当前组件已被删除，清空相关内容
等........当然更多操作还是得让各位按照各自需求去做了
文章如有错误还请大牛指正！！
