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í)行下去。
