1. vue生命周期：

beforeCreate：在實例初始化后，data observer和event/watcher事件之前被調(diào)用=>
created：實例已經(jīng)創(chuàng)建完成之后調(diào)用，掛載階段未開始，data observer，屬性和方法運算，watch/event事件回調(diào)已經(jīng)完成。{用來調(diào)用數(shù)據(jù)，調(diào)用方法，調(diào)用異步函數(shù)}=>
beforeMount：在掛載之前被調(diào)用，相關(guān)的render函數(shù)首次被調(diào)用=>
mounted：有初始值的DOM渲染，初始數(shù)據(jù)渲染完畢在這獲取=>
beforeUpdate：數(shù)據(jù)更新時調(diào)用，可以進一步更改狀態(tài)，不會觸發(fā)重新渲染=>
updated：組件dom渲染已經(jīng)更新，可以依賴于dom操作=>
beforeDestory：實例銷毀之前=>
destoryed：vue實例銷毀之后，解綁，移除監(jiān)聽器，銷毀實例

vue生命周期.png

2. 鉤子函數(shù)異步使用

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');
            //異步獲取數(shù)據(jù)
            // 因為是異步,就和我們ajax獲取數(shù)據(jù)一樣
            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>

結(jié)果：
create: aaaaaaaa
mounted: 3
created異步函數(shù)： 3
updated: 4
原因：
可以看到因為是在created的鉤子中加入異步函數(shù)，所以函數(shù)的執(zhí)行順序為：
ceated鉤子,mounted鉤子,異步函數(shù),updated鉤子 (根據(jù)事件隊列原理,只有在updated后，li才是真的DOM渲染為4個，所以異步函數(shù)中獲取的li的個數(shù)時是沒有變化的li的個數(shù))。
因為mounted獲取到的是我們在Vue的data中設(shè)置初始值渲染的DOM，而我們是在異步函數(shù)中變化的list數(shù)據(jù)，所以mounted獲取的li的個數(shù)為3。
update函數(shù)是只要數(shù)據(jù)vue綁定的數(shù)據(jù)變化就會觸發(fā)，所以最后執(zhí)行，為4
2.2 updated異步

/我們利用異步函數(shù)改變了兩次list，會發(fā)現(xiàn)update被觸發(fā)了2次
created:function(){
        //異步獲取數(shù)據(jù)
        // 因為是異步,就和我們ajax獲取數(shù)據(jù)一樣
        setTimeout(()=>{
             this.list=['111','222','333','444'],
             console.log('created異步：',document.getElementsByTagName('li').length);
        },0)
        setTimeout(()=>{
             this.list=['快樂大本營','腳踏實地','300033','天天向上','好好學(xué)習(xí)'],
             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對異步函數(shù)的結(jié)果進行各自的操作

created:function(){
//異步獲取數(shù)據(jù)
// 因為是異步,就和我們ajax獲取數(shù)據(jù)一樣

    //為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback) 。這樣回調(diào)函數(shù)在 DOM 更新完成后就會調(diào)用。
    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','天天向上','好好學(xué)習(xí)'],
        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