1. vue生命周期：
beforeCreate：在实例初始化后，data observer和event/watcher事件之前被调用=>
created：实例已经创建完成之后调用，挂载阶段未开始，data observer，属性和方法运算，watch/event事件回调已经完成。{用来调用数据，调用方法，调用异步函数}=>
beforeMount：在挂载之前被调用，相关的render函数首次被调用=>
mounted：有初始值的DOM渲染，初始数据渲染完毕在这获取=>
beforeUpdate：数据更新时调用，可以进一步更改状态，不会触发重新渲染=>
updated：组件dom渲染已经更新，可以依赖于dom操作=>
beforeDestory：实例销毁之前=>
destoryed：vue实例销毁之后，解绑，移除监听器，销毁实例
2. 钩子函数异步使用
2.1 created异步
<div id="app">
<ul>
<li v-for="(item,index) of list" key="index">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
list:['aaaaaaaa','bbbbbbb','ccccccc']
},
created:function(){
consoloe.log('created异步：aaaaa');
//异步获取数据
// 因为是异步,就和我们ajax获取数据一样
setTimeout(()=>{
this.list=['111','222','333','444'],
console.log('created异步：',document.getElementsByTagName('li').length);
},0)
},
mounted: function () {
console.log('mounted:',document.getElementsByTagName('li').length);
},
updated: function () {
console.log('updated:',document.getElementsByTagName('li').length)
},
})
</script>
结果：
create: aaaaaaaa
mounted: 3
created异步函数： 3
updated: 4
原因：
可以看到因为是在created的钩子中加入异步函数，所以函数的执行顺序为：
ceated钩子,mounted钩子,异步函数,updated钩子 (根据事件队列原理,只有在updated后，li才是真的DOM渲染为4个，所以异步函数中获取的li的个数时是没有变化的li的个数)。
因为mounted获取到的是我们在Vue的data中设置初始值渲染的DOM，而我们是在异步函数中变化的list数据，所以mounted获取的li的个数为3。
update函数是只要数据vue绑定的数据变化就会触发，所以最后执行，为4
2.2 updated异步
/我们利用异步函数改变了两次list，会发现update被触发了2次
created:function(){
//异步获取数据
// 因为是异步,就和我们ajax获取数据一样
setTimeout(()=>{
this.list=['111','222','333','444'],
console.log('created异步：',document.getElementsByTagName('li').length);
},0)
setTimeout(()=>{
this.list=['快乐大本营','脚踏实地','300033','天天向上','好好学习'],
console.log('created异步：',document.getElementsByTagName('li').length);
},1000)
},
mounted: function () {
console.log('mounted:',document.getElementsByTagName('li').length);
},
updated: function () {
console.log('updated:',document.getElementsByTagName('li').length)
}
输出：
created异步： 3
updated: 4
created异步： 4
updated: 5
2.3 Vue.nextTick对异步函数的结果进行各自的操作
created:function(){
//异步获取数据
// 因为是异步,就和我们ajax获取数据一样
//为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。
setTimeout(()=>{
this.list=['111','222','333','444'],
console.log('created异步：',document.getElementsByTagName('li').length);
this.$nextTick(function(){
console.log("created$nextTick：",document.getElementsByTagName('li').length)
});
},0)
setTimeout(()=>{
this.list=['快乐大本营','脚踏实地','300033','天天向上','好好学习'],
console.log('created异步：',document.getElementsByTagName('li').length);
this.$nextTick(function(){
console.log("created$nextTick：",document.getElementsByTagName('li').length)
});
},1000)
},
mounted: function () {
console.log('mounted:',document.getElementsByTagName('li').length);
},
updated: function () {
console.log('updated:',document.getElementsByTagName('li').length)
},
输出：
created异步：3
updated：4
created的nextTick：4
updated：5
created的$nextTick：5
