首先，每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過(guò)一系列的初始化過(guò)程，這個(gè)過(guò)程就是vue的生命周期。首先看一張圖
可以看到在vue一整個(gè)的生命周期中會(huì)有很多鉤子函數(shù)提供給我們?cè)趘ue生命周期不同的時(shí)刻進(jìn)行操作挂捅，那么先列出所有的鉤子函數(shù)，然后我們?cè)僖灰辉斀猓?/p>
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
可以看到一個(gè)vue實(shí)例在創(chuàng)建過(guò)程中調(diào)用的幾個(gè)生命周期鉤子。
1.在beforeCreate和created鉤子函數(shù)之間對(duì)的生命周期
? ? 在這個(gè)生命周期之間闲先，進(jìn)行初始化事件状土，進(jìn)行數(shù)據(jù)的觀測(cè)，可以看到在created的時(shí)候數(shù)據(jù)已經(jīng)和data屬性進(jìn)行綁定（放在data中的屬性當(dāng)值發(fā)生改變的同時(shí)伺糠，視圖也會(huì)改變）蒙谓。
2.created鉤子函數(shù)和beforeMount間的生命周期
在這一階段發(fā)生的事情還是比較多的。
首先會(huì)判斷對(duì)象是否有el選項(xiàng)训桶。如果有的話就繼續(xù)向下編譯累驮，如果沒(méi)有el選項(xiàng)，則停止編譯舵揭，也就意味著停止了生命周期谤专，直到在該vue實(shí)例上調(diào)用vm.$mount(el)。此時(shí)注釋掉代碼中:
el:?'#app',
然后運(yùn)行可以看到到created的時(shí)候就停止了：
如果我們?cè)诤竺胬^續(xù)調(diào)用vm.$mount(el),可以發(fā)現(xiàn)代碼繼續(xù)向下執(zhí)行了
vm.$mount(el) //這個(gè)el參數(shù)就是掛在的dom接點(diǎn)
然后午绳，我們往下看置侍，template參數(shù)選項(xiàng)的有無(wú)對(duì)生命周期的影響。
（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í)秕衙。
修改代碼如下, 在HTML結(jié)構(gòu)中增加了一串html，在vue對(duì)象中增加了template選項(xiàng)：
<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? <title>vue生命周期學(xué)習(xí)</title>
? <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
? <div id="app">
? ? <!--html中修改的-->
? ? <h1>{{message + '這是在outer HTML中的'}}</h1>
? </div>
</body>
<script>
? var vm = new Vue({
? ? el: '#app',
? ? template: "<h1>{{message +'這是在template中的'}}</h1>", //在vue配置項(xiàng)中修改的
? ? data: {
? ? ? message: 'Vue的生命周期'
? ? }
</script>
</html>
執(zhí)行后的結(jié)果可以看到在頁(yè)面中顯示的是：
那么將vue對(duì)象中template的選項(xiàng)注釋掉后打印如下信息：
這下就可以想想什么el的判斷要在template之前了~是因?yàn)関ue需要通過(guò)el找到對(duì)應(yīng)的outer template僵刮。
在vue對(duì)象中還有一個(gè)render函數(shù)灾梦，它是以createElement作為參數(shù)，然后做渲染操作妓笙，而且我們可以直接嵌入JSX.
new Vue({
? ? el: '#app',
? ? render: function(createElement) {
? ? ? ? return createElement('h1', 'this is createElement')
? ? }
})
可以看到頁(yè)面中渲染的是：
所以綜合排名優(yōu)先級(jí)：
render函數(shù)選項(xiàng) > template選項(xiàng) > outer HTML.
3. beforeMount和mounted 鉤子函數(shù)間的生命周期
可以看到此時(shí)是給vue實(shí)例對(duì)象添加$el成員若河，并且替換掉掛在的DOM元素。因?yàn)樵谥癱onsole中打印的結(jié)果可以看到beforeMount之前el上還是undefined寞宫。
4. mounted
注意看下面截圖：
在mounted之前h1中還是通過(guò){{message}}進(jìn)行占位的萧福，因?yàn)榇藭r(shí)還有掛在到頁(yè)面上，還是JavaScript中的虛擬DOM形式存在的辈赋。在mounted之后可以看到h1中的內(nèi)容發(fā)生了變化鲫忍。
5. beforeUpdate鉤子函數(shù)和updated鉤子函數(shù)間的生命周期
當(dāng)vue發(fā)現(xiàn)data中的數(shù)據(jù)發(fā)生了改變，會(huì)觸發(fā)對(duì)應(yīng)組件的重新渲染钥屈，先后調(diào)用beforeUpdate和updated鉤子函數(shù)悟民。我們?cè)赾onsole中輸入：
vm.message = '觸發(fā)組件更新'
發(fā)現(xiàn)觸發(fā)了組件的更新：
6.beforeDestroy和destroyed鉤子函數(shù)間的生命周期
beforeDestroy鉤子函數(shù)在實(shí)例銷(xiāo)毀之前調(diào)用。在這一步篷就，實(shí)例仍然完全可用射亏。
destroyed鉤子函數(shù)在Vue 實(shí)例銷(xiāo)毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定智润，所有的事件監(jiān)聽(tīng)器會(huì)被移除及舍，所有的子實(shí)例也會(huì)被銷(xiāo)毀。
