生命周期函數(shù)

生命周期函數(shù)就是 Vue 實(shí)例在某一個(gè)時(shí)間點(diǎn)會自動執(zhí)行的函數(shù)

簡單來說就是，鉤子（生命周期函數(shù)）就好像是把人的出生到死亡分成一個(gè)個(gè)階段，你肯定是在出生階段起名字，而不會在成年或者死亡的階段去起名字蒂阱∽断蹋或者說你想在出生階段去約炮，也是不行的今瀑。組件也是一樣，Vue 在實(shí)例化一個(gè)組件時(shí)會在特定的階段調(diào)用特定的方法腔丧，調(diào)用的這個(gè)方法就叫鉤子方法放椰，比如 Vue 在實(shí)例化組件之初按順序調(diào)用beforeCreated，created愉粤，beforeMounted砾医，mounted，每個(gè)階段組件內(nèi)部的屬性都是不一樣的衣厘，比如created鉤子時(shí)視圖還沒有渲染如蚜，就不能做一些dom操作。所以一般特定的鉤子做特定的事影暴，比如ajax獲取數(shù)據(jù)就可以在mounted階段错邦，當(dāng)然放在created，beforeMounted也是可以的型宙，因?yàn)?code>ajax是異步的嘛撬呢，ajax之后的回調(diào)會放在事件隊(duì)列的尾部，此時(shí)實(shí)例化組件整個(gè)過程會在ajax回調(diào)之前執(zhí)行完畢妆兑。所以ajax操作放在created魂拦，mounted里面都是可以的。

image

在調(diào)用new vue時(shí)搁嗓，Vue 會幫我們?nèi)?chuàng)建一個(gè) Vue 的實(shí)例芯勘，創(chuàng)建過程其實(shí)并不是像我們想的這么簡單，首先它會初始化一些事件和生命周期相關(guān)的內(nèi)容腺逛，

在初始化完成的時(shí)候荷愕，Vue 會自動的執(zhí)行一個(gè)beforeCreate函數(shù)，

之后會初始化一些外部的注入和一些雙向綁定相關(guān)的事情，當(dāng)這一部分完成后安疗，基本上 Vue 的初始化就都完成了抛杨。在這個(gè)節(jié)點(diǎn)上又有一個(gè)created函數(shù)被自動執(zhí)行

let vm = new Vue({
    el:'#app',
    beforeCreate(){
        console.log('beforeCreate')     
    },
    created(){
        console.log('created')
    }
})

這個(gè)時(shí)候 Vue 的初始化已經(jīng)基本結(jié)束了，然后它會詢問一個(gè)條件：你這個(gè) Vue 實(shí)例里是否有el這個(gè)選項(xiàng)

如果有就會詢問是否有template這個(gè)選項(xiàng)：

• 如果沒有就會走右側(cè)的這個(gè)分支茂契，
  • 如果這個(gè)實(shí)例沒有templeate蝶桶，就會將el這個(gè)根節(jié)點(diǎn)當(dāng)做模版，來進(jìn)行渲染
• 有就會走左側(cè)的分支
  • 把template作為模版去渲染

上面這一步走完后掉冶，并沒有立即渲染，在渲染之前會執(zhí)行beforeMount函數(shù)

當(dāng)這個(gè)函數(shù)執(zhí)行之后脐雪，模版結(jié)合數(shù)據(jù)最終生成的Dom元素厌小，會被掛載到頁面之上

當(dāng)被掛載到頁面之上，也就是hello world顯示到頁面之上战秋，這時(shí)候mounted函數(shù)會被執(zhí)行（頁面掛載之后會執(zhí)行）

let vm = new Vue({
    el:'#app',
    beforeCreate(){
        console.log('beforeCreate')
    },
    created(){
        console.log('created')
    },
    beforeMount(){
        console.log($el)                //<div id="app"></div>
        console.log('beforeMount')
    },
    mounted(){
        console.log($el)                //<div id="app">Hello world</div>
        console.log('mounted')
    }
})

這里也驗(yàn)證了beforeMount執(zhí)行時(shí)璧亚，頁面還沒有被渲染，mounted執(zhí)行時(shí)脂信，頁面已經(jīng)被渲染了

在往下是beforeDestory（實(shí)例被銷毀前執(zhí)行）癣蟋，destoryed（實(shí)例銷毀完成后執(zhí)行）

當(dāng)數(shù)據(jù)被改變時(shí)，會執(zhí)行beforeUpdate（數(shù)據(jù)被改變狰闪，還沒渲染之前觸發(fā)）疯搅，updated（數(shù)據(jù)被改變，渲染完成后觸發(fā)）