摘要：Vue爲生命週期中的每一個狀態都設置了鉤子函數(監聽函數) 。每當Vue實例處於不一樣的生命週期時，對應的函數就會被觸發調用。javascript
本文分享自華爲雲社區《一文帶你弄懂Vue八大生命週期鉤子函數》，原文做者：北極光之夜。。html
一.速識概念：
咱們把一個對象從生成（new）到被銷燬（destory）的過程，稱爲生命週期。而生命週期函數，就是在某個時刻會自動執行的函數。vue
按照官方的原話，就是每一個 Vue 實例在被建立時都要通過一系列的初始化過程——例如，須要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程當中也會運行一些叫作生命週期鉤子的函數，這給了用戶在不一樣階段添加本身的代碼的機會。java
簡單來講就是每一個Vue實例在被建立時都要通過一系列的初始化過程：建立實例，裝載模板，渲染模板等。Vue爲生命週期中的每一個狀態都設置了鉤子函數(監聽函數) 。每當Vue實例處於不一樣的生命週期時，對應的函數就會被觸發調用。app
二.八大生命週期鉤子函數：
| 函數函數 |
調用時間ui |
| beforeCreatethis |
vue實例初始化以前調用url |
| createdspa |
vue實例初始化以後調用 |
| beforeMount |
掛載到DOM樹以前調用 |
| mounted |
掛載到DOM樹以後調用 |
| beforeUpdate |
數據更新以前調用 |
| updated |
數據更新以後調用 |
| beforeDestroy |
vue實例銷燬以前調用 |
| destroyed |
vue實例銷燬以後調用 |
| 北極光之夜。 |
北極光之夜。 |
下面是官方文檔裏的生命週期圖，英語好的同窗能夠看看： 
三.結合代碼瞭解：
先看案例基本代碼以下，後面經過以下代碼步驟演示一個對象從生成到被銷燬的過程各階段執行的生命週期函數。注意show函數的做用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{information}}
</div>
<script type="text/javascript">
//建立vue實例
var vm = new Vue({
el: '#app',
data: {
information: '北極光之夜。'
}
})
// 各個生命週期函數經過調用下面這個函數了解其所處的生命階段
function show(inf,obj){
console.log(inf);
console.log("------------------------------------------");
console.log('獲取vue實例data裏的數據:');
console.log(obj.information);
console.log("------------------------------------------");
console.log('掛載的對象，就是DOM：');
console.log(obj.$el);
console.log("------------------------------------------");
console.log('頁面上已經掛載的DOM：');
console.log(document.getElementById('app').innerHTML);
}
</script>
1. beforeCreate：
這個階段vue實例剛剛在內存中建立，此時data和methods這些都沒初始化好。在案例中添加beforeCreate鉤子函數：
var vm = new Vue({
el: '#app',
data: {
information: '北極光之夜。'
},
beforeCreate: function(){
// 傳入該階段簡介與this，this就是該階段的vue實例
show('vue實例初始化以前',this);
}
})
看運行結果：
能夠看到，此時vue實例剛剛在內存中建立，其它什麼都undefined。
2.created：
這個階段vue實例在內存中已經建立好了，data和methods也可以獲取到了，可是模板還沒編譯。在案例中添加created鉤子函數：
var vm = new Vue({
el: '#app',
data: {
information: '北極光之夜。'
},
created: function(){
show('vue實例初始化以後',this);
}
})
看結果：
看到沒，已經知道data裏的數據了。其它的話都沒。
3.beforeMount：
這個階段完成了模板的編譯，可是還沒掛載到頁面上。在案例中添加鉤子函數：
var vm = new Vue({
el: '#app',
data: {
information: '北極光之夜。'
},
beforeMount: function(){
show('掛載以前',this);
}
})
看結果：
看到沒，要掛載的對象都編譯好了，可是頁面的DOM樹還沒掛上去，這個階段頁面還沒能顯示出來。
4.mounted：
這個階段，模板編譯好了，也掛載到頁面中了，頁面也能夠顯示了。在案例中添加鉤子函數：
var vm = new Vue({
el: '#app',
data: {
information: '北極光之夜。'
},
mounted: function(){
show('掛載以後',this);
}
})
看結果：
5.beforeUpdate:
轉態更新以前執行此函數，此時data中數據的狀態值已經更新爲最新的，可是頁面上顯示的數據仍是最原始的，尚未從新開始渲染DOM樹。
先改變data裏數據：
vm.information = '南極光之夜';
在案例中添加鉤子函數：
var vm = new Vue({
el: '#app',
data: {
information: '北極光之夜。'
},
beforeUpdate: function(){
show('更新以前',this);
}
})
看結果：
看到沒，vue實例裏的數據已經變成了南極光之夜。可是此階段頁面DOM節點上顯示的仍是初始的數據北極光之夜。
6.updated：
這個階段是轉態更新完成後執行此函數，此時data中數據的狀態值是最新的，並且頁面上顯示的數據也是最新的，DOM節點已經被從新渲染了。在案例中添加鉤子函數：
var vm = new Vue({
el: '#app',
data: {
information: '北極光之夜。'
},
updated: function(){
show('更新以後',this);
}
})
看運行結果：
更新了，全都更新了~
7.beforeDestroy：
beforeDestroy階段處於vue實例被銷燬以前，固然，這個階段vue實例還能用。
銷燬Vue實例：
vm.$destroy();
在案例中添加鉤子函數：
var vm = new Vue({
el: '#app',
data: {
information: '北極光之夜。'
},
beforeDestroy: function() {
show('銷燬以前',this);
}
})
看效果：
8.destroyed：
這個階段在vue實例銷燬後調用，此時全部實例指示的全部東西都會解除綁定，事件監聽器也都移除，子實例也被銷燬。
在案例中添加鉤子函數：
var vm = new Vue({
el: '#app',
data: {
information: '北極光之夜。'
},
destroyed: function() {
show('銷燬以後',this);
}
})
看結果：