為什么要了解vue 的生命周期
如果只是了解vue的語(yǔ)法，也可以根據(jù)你的想法實(shí)現(xiàn)自己的需求，但是一旦出現(xiàn)問(wèn)題，就要借助于生命周期去尋找原因，解決問(wèn)題。另外，有一些需求也需要我們通過(guò)生命周期來(lái)實(shí)現(xiàn)，決定我們把方法寫在哪個(gè)周期里。
生命周期
vue官網(wǎng)對(duì)生命周期有個(gè)詳細(xì)的解釋，如圖：
圖中紅色部分是生命周期涉及到的鉤子函數(shù)。
鉤子函數(shù)
首先是第一個(gè)鉤子函數(shù)。
beforeCreate：此時(shí)vue對(duì)象還沒(méi)有產(chǎn)生，具體應(yīng)用中，可以在此處做一些類似加載動(dòng)畫的東西。
緊接著是created。
created：此時(shí)組件已經(jīng)被創(chuàng)建好，屬性也已經(jīng)被綁定，但是此時(shí)DOM還并未生成，el屬性還不存子啊。此時(shí)可以做什么呢？此時(shí)可以獲取一些對(duì)應(yīng)的數(shù)據(jù)，比如請(qǐng)求網(wǎng)絡(luò)接口，把從接口獲取的數(shù)據(jù)賦給屬性，以便在DOM里展示，通常也會(huì)在此時(shí)結(jié)束上一步里的加載動(dòng)畫等操作。
再往下，會(huì)查找是否有el屬性。el屬性即：
如果有，會(huì)繼續(xù)檢查是否有template屬性；如果沒(méi)有，會(huì)檢查new Vue后面是否有el屬性，即：
如果兩者都沒(méi)有el屬性，聲明周期就結(jié)束了。如果有一個(gè)，進(jìn)行下一步，檢查是否有template。
繼續(xù)往下，如果有template組件，則會(huì)執(zhí)行render方法，來(lái)渲染template中對(duì)應(yīng)的內(nèi)容；
如果沒(méi)有template組件，查看是否有el外部的html標(biāo)簽可以作為template編譯：
如果兩者都沒(méi)有，生命周期結(jié)束，因?yàn)闆](méi)有可以渲染的內(nèi)容。
然后進(jìn)入下一個(gè)鉤子函數(shù)。
beforeMount：此時(shí)開始編譯template中的內(nèi)容，但是實(shí)在虛擬DOM中執(zhí)行，也就是說(shuō)，此時(shí)還不能看到頁(yè)面。
編譯之后開始掛載。之后是mounted。
mounted：此方法結(jié)束的時(shí)候，頁(yè)面已經(jīng)顯示。如果有一些內(nèi)容是需要頁(yè)面顯示之后再操作的，就可以卸載mounted函數(shù)里面。比如，如果需要在當(dāng)前頁(yè)面顯示之后再獲取數(shù)據(jù)，就可以寫在此處。
掛載之后，DOM生成，此時(shí)便可以對(duì)DOM進(jìn)行操作，比如增刪改查數(shù)據(jù)之類的。
beforedUpdate：更新組件之前，更新之前如果要進(jìn)行一些操作的話，可以在此處實(shí)現(xiàn)，比如刷新動(dòng)畫。
updated：更新完成，頁(yè)面已經(jīng)展示。一般情況下，如果需要在當(dāng)前組件中做一些改變的話，可以調(diào)用此函數(shù)。
接著如生命周期的尾部。
beforeDestory：銷毀之前。
destoryed：銷毀，生命周期結(jié)束。
示例
下面的代碼，可以直觀的展示生命周期里鉤子函數(shù)執(zhí)行的順序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<button @click ="changeText">改變文字</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:'你好啊',
},
methods:{
changeText:function(){
this.message += ' 蝙蝠俠！'
}
},
beforeCreated:function(){
alert("組件實(shí)例化之前執(zhí)行的函數(shù)")
},
created:function(){
alert('組件實(shí)例化完成，但頁(yè)面未顯示')
},
beforeMount:function(){
alert('組件掛載前，頁(yè)面未顯示，但虛擬DOM已經(jīng)配置')
},
mounted:function(){
alert('組件掛載后，頁(yè)面顯示')
},
beforeUpdate:function(){
alert('組件更新前，頁(yè)面未更新，虛擬DOM已經(jīng)配置')
},
updated:function(){
alert('組件更新后，頁(yè)面已更新')
},
beforeDestory:function(){
alert('組件銷毀前')
},
destroyed:function(){
alert('組件銷毀后')
}
})
</script>
</body>
</html>
