Vue大概分為三大部分

• 初始化部分
• 運(yùn)行/掛載部分
• 銷(xiāo)毀部分

作用

我們可以使用生命周期鉤子在Vue對(duì)象生命周期的不同階段添加我們的自定義代碼。它將幫助我們控制在DOM中創(chuàng)建對(duì)象時(shí)創(chuàng)建的流程，以及更新和刪除對(duì)象。

beforCreate()

實(shí)例、組件通過(guò)new Vue() 創(chuàng)建出來(lái)之后會(huì)初始化事件和生命周期，然后就會(huì)執(zhí)行beforeCreate鉤子函數(shù)，這個(gè)時(shí)候，數(shù)據(jù)還沒(méi)有掛載呢，只是一個(gè)空殼，無(wú)法訪問(wèn)到數(shù)據(jù)和真實(shí)的dom，一般不做操作，此時(shí)el和data并未初始化

created()

掛載數(shù)據(jù)，綁定事件等等，然后執(zhí)行created函數(shù)，首先會(huì)判斷對(duì)象是否有el選項(xiàng)，如果有的話就繼續(xù)向下編譯，如果沒(méi)有el選項(xiàng)，則停止編譯，也就意味著停止了生命周期，直到在該vue實(shí)例上調(diào)用vm.$mount(el)，這個(gè)時(shí)候已經(jīng)可以使用到數(shù)據(jù)，也可以更改數(shù)據(jù),在這里更改數(shù)據(jù)不會(huì)觸發(fā)updated函數(shù)，在這里可以在渲染前倒數(shù)第二次更改數(shù)據(jù)的機(jī)會(huì)，不會(huì)觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取

（1）如果vue實(shí)例對(duì)象中有template參數(shù)選項(xiàng)，則將其作為模板編譯成render函數(shù)。
（2）如果沒(méi)有template選項(xiàng)，則將外部HTML作為模板編譯。
（3）可以看到template中的模板優(yōu)先級(jí)要高于outer HTML的優(yōu)先級(jí)。

beforeMount()

找到對(duì)應(yīng)的模板狗，編譯模板為Virtual DOM (虛擬Dom)技術(shù)放入到render函數(shù)中準(zhǔn)備渲染，然后執(zhí)行beforeMount鉤子函數(shù)，在這個(gè)函數(shù)中虛擬dom已經(jīng)創(chuàng)建完成，馬上就要渲染,在這里也可以更改數(shù)據(jù)，不會(huì)觸發(fā)updated，在這里可以在渲染前最后一次更改數(shù)據(jù)的機(jī)會(huì)，不會(huì)觸發(fā)其他的鉤子函數(shù)，也可以在這里做初始數(shù)據(jù)的獲取，數(shù)據(jù)則用{{ msg }}占住坑,等到mounted掛載的時(shí)候再渲染進(jìn)去

mounted()

接下來(lái)開(kāi)始render，渲染出真實(shí)dom，然后執(zhí)行mounted鉤子函數(shù)，此時(shí)，組件已經(jīng)出現(xiàn)在頁(yè)面中，數(shù)據(jù)、真實(shí)dom都已經(jīng)處理,事件都已經(jīng)掛載

更新數(shù)據(jù)

• beforeUpdate()

當(dāng)組件或?qū)嵗臄?shù)據(jù)更改之后，會(huì)立即執(zhí)行beforeUpdate，然后vue的虛擬dom機(jī)制會(huì)重新構(gòu)建虛擬dom與上一次的虛擬dom樹(shù)利用diff算法進(jìn)行對(duì)比之后重新渲染，一般不做什么事兒

• update()

當(dāng)經(jīng)過(guò)某種途徑調(diào)用$destroy方法后，立即執(zhí)行beforeDestroy，一般在這里做一些善后工作

beforeDestory()

組件銷(xiāo)毀前

destoryed()

組件的數(shù)據(jù)綁定、監(jiān)聽(tīng)...去掉后只剩下dom空殼，這個(gè)時(shí)候，執(zhí)行destroyed，在這里做善后工作也可以

生命周期應(yīng)用實(shí)例

beforecreate : 可以在這加個(gè)loading事件
created ：在這結(jié)束loading，還做一些初始化，實(shí)現(xiàn)函數(shù)自執(zhí)行
mounted ： 在這發(fā)起后端請(qǐng)求，拿回?cái)?shù)據(jù)，配合路由鉤子做一些事情
beforeDestroy：例如:你確認(rèn)刪除XX嗎?、清除計(jì)時(shí)器、清除非指令綁定的事件等等
destroyed：當(dāng)前組件已被刪除，清空相關(guān)內(nèi)容

生命周期圖示