vue生命周期
每個Vue實例或組件從創(chuàng)建到顯示再到廢棄的過程就是vue的生命周期妻熊。很多時候我們希望能在這個過程中執(zhí)行一些操作，于是就有了生命周期鉤子仑最。
生命周期鉤子函數(shù)允許我們在實例不同階段執(zhí)行各種操作扔役，便于我們更好地控制和使用實例。
一警医、基本生命周期
首先看一個示例
<!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生命周期學習</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}亿胸，這是在outerHtml中</h1>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 10
},
beforeCreate: function() {
console.group('------beforeCreate創(chuàng)建前狀態(tài)------');
console.log("%c%s", "color:red" , "el : " + this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
},
created: function() {
console.group('------created創(chuàng)建完畢狀態(tài)------');
console.log("%c%s", "color:red","el : " + this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeMount: function() {
console.group('------beforeMount掛載前狀態(tài)------');
console.log("%c%s", "color:red","el : " + (this.$el));
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
mounted: function() {
console.group('------mounted 掛載結(jié)束狀態(tài)------');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 銷毀前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 銷毀完成狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</html>
輸出結(jié)果
1、在beforeCreate之前的生命周期
顧名思義法严，創(chuàng)建之前的階段损敷，此時該實例內(nèi)的所有東西都還沒有創(chuàng)建，所以在這個生命周期鉤子函數(shù)中$el,data都是undefined深啤。
beforeCreate
2拗馒、在beforeCreate和created鉤子函數(shù)之間的生命周期。
在這個生命周期之間溯街，進行初始化事件诱桂，進行數(shù)據(jù)的觀測，在created的時候數(shù)據(jù)已經(jīng)和data屬性進行綁定呈昔，在這個生命周期鉤子函數(shù)中挥等，我們可以獲取到data的值并對它進行操作。
created
3堤尾、在created和beforeMount間的生命周期
（1）在這一階段肝劲，首先會判斷是否有el選項，如果有的話就繼續(xù)向下編譯郭宝，如果沒有el選項辞槐，則停止編譯，也就意味著停止了生命周期粘室，直到在該實例上調(diào)用vm.$mount(el)[也就是動態(tài)引入了el]榄檬。
當我們把示例代碼中el注釋或者刪掉，則頁面最后效果如下圖：
沒有el
（2）除了el衔统，我們還會用到template鹿榜，template對生命周期的影響如下：
- 如果如果vue實例對象中有template參數(shù)選項，則將其作為模板編譯成render函數(shù)
- 如果沒有template選項锦爵，則將外部html作為模板編譯（可參考上面示例的結(jié)果）
- template中的模板優(yōu)先級要高于outer html的優(yōu)先級
當我們添加template參數(shù)舱殿，代碼下圖：
template代碼
打印結(jié)果如下圖：
template結(jié)果
所以el的判斷要在template之前，因為vue需要通過el找到對應(yīng)的outer template
（3）在vue對象中棉浸，還有一個render函數(shù)怀薛，它是以createElement作為參數(shù)，然后做渲染迷郑，而且可以直接嵌入JSX枝恋。
添加render函數(shù)看下效果创倔，更改代碼如下圖：
render代碼
效果如下：
render結(jié)果
注：綜合排名優(yōu)先級：render函數(shù)>template選項>outer Html
4、beforeMount和mounted鉤子函數(shù)間的生命周期
此時是給vue實例對象添加$el成員焚碌，并且替換掉掛載的DOM元畦攘。
mount
可以看到圖中beforeMount鉤子函數(shù)中掛載元素中還是{{message}}，到mounted鉤子函數(shù)中的時候掛載已完成十电，所以掛載元素中顯示的是message的值
5知押、beforeUpdate鉤子函數(shù)和updated鉤子函數(shù)間的生命周期
當vue發(fā)現(xiàn)data中的數(shù)據(jù)發(fā)生變化，會觸發(fā)對對應(yīng)組件的重新渲染鹃骂，當數(shù)據(jù)改變后調(diào)用beforeupdata台盯，當渲染完成后調(diào)用updated鉤子函數(shù)。
我們可以通過在控制臺輸入app.message=20來觸發(fā)update事件畏线。輸出如下圖：
update
可以看到beforeUpdate和updated里面的message值都是20静盅，所以data值改變后觸發(fā)beforeUpdate鉤子函數(shù)，當頁面渲染完成后調(diào)用updated寝殴。這點可以通過在updated鉤子函數(shù)中使用alert打斷程序運行蒿叠，可以看到頁面中并沒有更新，而且通過官方流程圖也可以看出蚣常。
1534238864402.jpg
注：通過試驗證明市咽，在mounted鉤子函數(shù)中執(zhí)行修改data的操作會觸發(fā)beforeUpdate，而它之前的函數(shù)中只要不是可以跳出主線程的數(shù)據(jù)操作抵蚊，都不會觸發(fā)beforeUpdate施绎。例如使用setTimeout會使其中代碼跳出主線程到異步線程中，所以它的執(zhí)行會在mounted之后贞绳，所以會觸發(fā)beforeUpdate粘姜。
6、beforeDestroy和destroyed鉤子函數(shù)間的生命周期熔酷。
beforeDestroy鉤子函數(shù)在實例銷毀之前調(diào)用。在這一步實例仍然可用豺裆。destroyed鉤子函數(shù)在Vue 實例銷毀后調(diào)用拒秘。調(diào)用后，Vue 實例指示的所有東西都會解綁定臭猜，所有的事件監(jiān)聽器會被移除躺酒，所有的子實例也會被銷毀。
destroy
可以看到雖然我們還可以獲取到app對象蔑歌，但是對它的修改已經(jīng)不能觸發(fā)視圖的渲染了羹应。
官網(wǎng)圖片，展示整個流程次屠。vue組件是可復用的vue實例园匹，所以每個組件的創(chuàng)建到掛載展示都可以使用以上生命周期鉤子函數(shù)雳刺。
image
keep-alive標簽包裹的組件在它們第一次被創(chuàng)建的時候就被緩存下來。與此相關(guān)的有兩個生命周期鉤子函數(shù)：activated 和 deactivated裸违。當組件在<keep-alive>內(nèi)被切換時掖桦，activated 和 deactivated 這兩個生命周期鉤子函數(shù)將會被對應(yīng)執(zhí)行。
- activated:在組件被激活時調(diào)用供汛，在組價第一次渲染時也會被調(diào)用枪汪，之后每次keep-alive激活時被調(diào)用。
- deactivated:在組件被停用時調(diào)用怔昨。
注意：只有組件被 keep-alive 包裹時雀久，這兩個生命周期才會被調(diào)用，如果作為正常組件使用趁舀，是不會被調(diào)用的赖捌。
vue-router路由，它也有類似于生命周期鉤子的函數(shù)赫编，允許我們在路由變化的不同階段進行一些操作巡蘸，官網(wǎng)叫做導航守衛(wèi)，本質(zhì)也是在路由變化的過程中添加鉤子函數(shù)擂送。
路由組件內(nèi)可以直接定義路由導航守衛(wèi)
beforeRouteEnter (to, from, next) {
# 在導航確認前被調(diào)用,即將掛載的新組件還沒被創(chuàng)建悦荒。
# 不能獲取組件實例 `this`
# 因為當守衛(wèi)執(zhí)行前，組件實例還沒被創(chuàng)建
},
beforeRouteUpdate (to, from, next) {
# 在當前路由改變嘹吨，但是該組件被復用時調(diào)用
# 可以訪問組件實例 `this`
},
beforeRouteLeave (to, from, next) {
# 導航離開該組件的對應(yīng)路由時調(diào)用
# 可以訪問組件實例 `this`
}
beforeRouteEnter 守衛(wèi)不能訪問this搬味，但是我們可以傳遞給next方法一個回調(diào)，來訪問組件實例蟀拷。在導航被確認的時候執(zhí)行回調(diào)碰纬，并且把組件實例作為回調(diào)方法的參數(shù)。
注意 beforeRouteEnter 是支持給 next 傳遞回調(diào)的唯一守衛(wèi)问芬。對于 beforeRouteUpdate 和 beforeRouteLeave 來說悦析，this 已經(jīng)可用了，所以不支持傳遞回調(diào)此衅，因為沒有必要了强戴。
每個守衛(wèi)方法接收三個參數(shù)：
- to:即將要進入的目標路由對象
- from:當前導航正要離開的路由
- next:function:一定要調(diào)用該方法來resolve鉤子函數(shù)，否則程序?qū)⒉辉S繼續(xù)執(zhí)行下去挡鞍。
