父組件app包裹子組件child時(shí)，兩個(gè)組件的生命周期的執(zhí)行順序?yàn)椋篴pp創(chuàng)建前、app創(chuàng)建后、app掛載前、child創(chuàng)建前、child創(chuàng)建后、child掛載前、child掛載后、app掛載后。

vue組件的生命周期有四個(gè)階段分別是創(chuàng)建、掛載、更新、銷毀。這四個(gè)階段對(duì)應(yīng)了八個(gè)生命周期鉤子函數(shù)，他們代表著組件從創(chuàng)建到銷毀的過程。

beforeCreate在事件及生命周期被初始化后，在數(shù)據(jù)注入之前直接執(zhí)行，此時(shí)還沒有初始化好data和methods屬性，組件中的data和ref都為undefined。

數(shù)據(jù)注入后會(huì)執(zhí)行created，此時(shí)data和methods已經(jīng)創(chuàng)建OK，還沒有開始編譯模板，可以訪問和操作data，可以發(fā)送請(qǐng)求和訪問數(shù)據(jù)，ref依然為undefined，因?yàn)檫€沒有掛載，el不可用。

接著會(huì)判斷組件上是否有el選項(xiàng)，如果有就繼續(xù)判斷是否有template選項(xiàng)，如果有template選項(xiàng)，就直接使用template替換el成為模板，如果沒有，則直接使用el作為模板，如果沒有el，則等待app.$mount被調(diào)用，還是繼續(xù)判斷是否有template選項(xiàng)，template判斷完成相關(guān)操作執(zhí)行后，則調(diào)用beforeMount函數(shù)，此時(shí)已完成了模板的編譯，但是還沒有掛載到頁面中，此時(shí)refs為空對(duì)象。

然后創(chuàng)建app.el，替換后調(diào)用mounted，將虛擬dom渲染為真實(shí)的dom并且渲染數(shù)據(jù)，只有在所有子組件全部掛載完畢后才會(huì)執(zhí)行根組件的掛載鉤子，此時(shí)$refs有值了。

如果數(shù)據(jù)更新，在更新前先執(zhí)行beforeUpdate鉤子，他在頁面數(shù)據(jù)更新前調(diào)用，此時(shí)data的數(shù)據(jù)已更新，但頁面尚未和最新的數(shù)據(jù)同步（document.body.innertext還是渲染后的舊數(shù)據(jù)），不可再此更改數(shù)據(jù)，等待虛擬dom更新完成后，執(zhí)行updated函數(shù)，這時(shí)data和模板的數(shù)據(jù)都是最新的。

如果組件被銷毀，則先調(diào)用beforeDestroy，在這一步仍然實(shí)例完全可調(diào)用，然后小銷毀子組件和事件監(jiān)聽器，最后執(zhí)行destroy，前者適合移除事件和定時(shí)器，否則會(huì)引起內(nèi)存泄漏。如果有子組件，也會(huì)遞歸銷毀子組件，所有子組件全部銷毀完畢才會(huì)執(zhí)行根組件的destroy函數(shù)。

除了這八個(gè)還有，deActivated，activated。使用keep-alive包裹的組件會(huì)有這兩個(gè)函數(shù)，組件切換時(shí)，不會(huì)銷毀組件的事件監(jiān)聽器，而是放在內(nèi)存中，這時(shí)就會(huì)觸發(fā)這兩個(gè)函數(shù)。