定義：Vue實(shí)例或組件從創(chuàng)建到顯示再到廢棄的過(guò)程。
作用：給用戶在不同階段添加自己的代碼的機(jī)會(huì)爷恳，更好的控制和使用實(shí)力有缆。
生命周期圖示：
代碼示例：
<!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>生命周期示例</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: "生命周期示例"
},
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>
瀏覽器按F12快捷鍵查看控制臺(tái)打印結(jié)果：
生命周期詳解
| 函數(shù)鉤子 | 講解 |
|---|---|
| beforeCreate | 組件實(shí)例通過(guò)new Vue() 剛被創(chuàng)建，此時(shí)温亲，數(shù)據(jù)data還未被掛載到vm對(duì)象棚壁，無(wú)法訪問(wèn)data和真實(shí)的dom掛載元素el，所以$el,data都是undefined |
| created | 組件實(shí)例創(chuàng)建完成栈虚，data已掛載袖外，此時(shí)可更改data,一般可在此做數(shù)據(jù)初始化。此時(shí)DOM元素未生成魂务，el不存在 |
| beforeMount | 模板編譯/掛載前曼验，虛擬dom已經(jīng)創(chuàng)建完成,未被渲染泌射，此時(shí)改數(shù)據(jù)，不會(huì)觸發(fā)其他鉤子函數(shù)鬓照，可在此初始化數(shù)據(jù) |
| mounted | 模板編譯/掛載后熔酷，組件已出現(xiàn)在頁(yè)面中，數(shù)據(jù)颖杏、真實(shí)dom已處理好,事件已掛載好纯陨，可在此操作真實(shí)dom |
| beforeUpdate | 組件更新前，當(dāng)組件或?qū)嵗臄?shù)據(jù)更改后留储，立即執(zhí)行beforeUpdate翼抠，vue的虛擬dom機(jī)制重新構(gòu)建虛擬dom與上一次的虛擬dom樹(shù)利用diff算法進(jìn)行對(duì)比之后重新渲染，一般不做什么事兒 |
| updated | 數(shù)據(jù)完成更新获讳、dom重渲染完成阴颖，可操作更新后的虛擬dom |
| beforeDestroy | 組件銷毀時(shí)立即執(zhí)行beforeDestroy，可在此做善后工作丐膝，如清除計(jì)時(shí)器等 |
| destroyed | 組件的數(shù)據(jù)綁定量愧、監(jiān)聽(tīng)...解綁后只剩dom空殼，此時(shí)帅矗，執(zhí)行destroyed偎肃，在此做善后工作亦可 |
注意：
1. 在beforeMount期間：
我們發(fā)現(xiàn)el還是 {{message}}，這里應(yīng)用了 Virtual DOM（虛擬Dom）技術(shù)浑此，先占位累颂，后續(xù)mounted掛載時(shí)再把值渲染進(jìn)去。
2. 在created和beforeMount期間：
(1) 首先會(huì)判斷是否有el選項(xiàng)凛俱，如果有的話就繼續(xù)向下編譯紊馏，如果沒(méi)有el選項(xiàng)，則停止編譯蒲犬，也就意味著停止了生命周期朱监，直到在該實(shí)例上調(diào)用vm.$mount(el)[也就是動(dòng)態(tài)引入了el]。現(xiàn)在原叮，我們把代碼中el配置注釋掉赫编，頁(yè)面控制臺(tái)如圖2所示。
下面奋隶，我們?cè)赾reated鉤子中繼續(xù)調(diào)用vm.$mount(el),運(yùn)行可見(jiàn)代碼走完了沛慢，代碼和效果如下圖：
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);
this.$mount('#app')
},
(2) 在created期間，data數(shù)據(jù)已掛載达布，可操作data,但dom未生產(chǎn)，所以控制臺(tái)上可見(jiàn)message數(shù)值逾冬，但是頁(yè)面上的message未渲染黍聂，可與圖一對(duì)比躺苦。
3. template配置項(xiàng)作用：
- 如果沒(méi)有template選項(xiàng)，則將外部html作為模板編譯（此示例便是）
- 如果如果vue實(shí)例對(duì)象中有template參數(shù)選項(xiàng)产还，則將其作為模板編譯
- template中的模板優(yōu)先級(jí)要高于outer html的優(yōu)先級(jí)
現(xiàn)在我們來(lái)添加template參數(shù)匹厘，代碼修改如下：
<body>
<div id="app">
<h1>{{message}}我是html</h1>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
template:"<h2>{{message}}我是模板，優(yōu)先級(jí)高于外部html</h2>",
data: {
message: "生命周期示例"
},
})
...
</script>
瀏覽器按f12查看顯示結(jié)果：
4.render函數(shù)：
vue對(duì)象中的render函數(shù)脐区，以createElement為參數(shù)愈诚，然后做渲染。代碼中添加render函數(shù)牛隅，效果如下圖：
....
<body>
<div id="app">
<h1>{{message}}我是html</h1>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
template:"<h2>{{message}}我是模板炕柔，優(yōu)先級(jí)高于外部html</h2>",
render:function(createElement){
return createElement('h2','我是render函數(shù)，我是老大')
},
data: {
message: "生命周期示例"
},
})
</script>
總結(jié)：優(yōu)先級(jí)排序：render函數(shù) > template選項(xiàng) > outer Html
5. update鉤子：
在chrome console里的輸入命令：app.message = "單身狗"媒佣∝袄郏可以看到，觸發(fā)了beforeUpdate和updated鉤子默伍。updated函數(shù)中欢嘿，數(shù)據(jù)已更改完成，dom已重新render也糊，此時(shí)可操作更新后的虛擬dom炼蹦。
tip:
以上，可看出狸剃，在mounted鉤子中修改data會(huì)觸發(fā)beforeUpdate掐隐，它之前的函數(shù)中只要不是可以跳出主線程的數(shù)據(jù)操作，都不會(huì)觸發(fā)beforeUpdate捕捂。例如setTimeout會(huì)使代碼跳出主線程到異步線程中瑟枫，所以它的執(zhí)行會(huì)在mounted之后，所以會(huì)觸發(fā)beforeUpdate指攒。
6.beforeDestroy和destroyed鉤子函數(shù)：
在chrome console里的輸入命令：app.$destroy()慷妙。瀏覽器顯示如下。
?
beforeDestroy鉤子在實(shí)例銷毀之前執(zhí)行允悦。在這一步實(shí)例仍然可用膝擂。
destroyed鉤子在Vue 實(shí)例銷毀后執(zhí)行。之后隙弛，Vue 實(shí)例指向的所有data解綁架馋，事件監(jiān)聽(tīng)器被移除，子實(shí)例被銷毀全闷。重點(diǎn)：$destory是解綁實(shí)例,不是刪除實(shí)例叉寂，實(shí)例仍然存在。我們?cè)诳刂婆_(tái)改變data的值总珠，會(huì)發(fā)現(xiàn)頁(yè)面并沒(méi)有被渲染屏鳍。
外帶activated和deactivated鉤子：
- activated:在組件被激活時(shí)調(diào)用勘纯，每次keep-alive激活時(shí)都會(huì)被被調(diào)用。
- deactivated:在組件被停用時(shí)調(diào)用钓瞭。
本篇筆記就這么多驳遵，我是錢多多，一敲代碼頭就疼山涡。
