Vue框架生命周期總結(jié)
一扰楼、生命周期運行圖
3504099265-580628fd03258_articlex.png
二、所有生命周期
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "xuxiao is boy"
},
beforeCreate: function () {
console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
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); //undefined
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);
},
activated: function () {
console.group('keep-alive 組件激活時調(diào)用===============》');
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);
},
deactivated: function () {
console.group('keep-alive 組件停用時調(diào)用===============》');
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>
</body>
</html>
三鹰溜、用法
1.組件創(chuàng)建前
beforeCreate: function () {
console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
這個階段主要是完成vue中關(guān)于生成周期以及事件的一些初始化工作，在這之前它會執(zhí)行一個mergeOptions函數(shù)臭杰，得到$options選項，并把它設(shè)置成Vue實例的一個屬性谚中。
如何在這個生命周期中拿到data
1.setTimeout 相當(dāng)于在初始化前告訴容器渴杆，等全執(zhí)行完了再跑里面的代碼寥枝。這種方式別說拿data了，拿渲染完DOM都OK~
2.直接從this.$ptions.data里去拿, 在beforeCreate前磁奖，所有的options都會先存到vm. options中囊拜，在beforeCreate之后，將options里的data啦比搭，props啦冠跷，methods啦等等一個個附到vm上。
2.組件創(chuàng)建完畢
created: function () {
console.group('created 創(chuàng)建完畢狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
在實例創(chuàng)建完成后被立即調(diào)用身诺。在這一步蜜托，實例已完成以下的配置：數(shù)據(jù)觀測 (data observer)，屬性和方法的運算霉赡，watch/event 事件回調(diào)橄务。然而，掛載階段還沒開始穴亏，$el 屬性目前不可見仪糖。
一般在這個生命周期調(diào)用ajax訪問后臺接口獲取頁面初始化所需的數(shù)據(jù)。
3.組件掛載前
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); //已被初始化
},
在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用迫肖。
4.組件掛載前
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); //已被初始化
},
el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用該鉤子攒驰。
在模板渲染成html后調(diào)用蟆湖，通常是初始化頁面完成后，再對html的dom節(jié)點進(jìn)行一些需要的操作玻粪。
5.組件更新前
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);
},
數(shù)據(jù)更新時調(diào)用隅津，發(fā)生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM劲室，比如手動移除已添加的事件監(jiān)聽器伦仍。
6.組件更新后
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);
},
由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁，在這之后會調(diào)用該鉤子很洋。
當(dāng)這個鉤子被調(diào)用時充蓝，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作喉磁。然而在大多數(shù)情況下谓苟，你應(yīng)該避免在此期間更改狀態(tài)。如果要相應(yīng)狀態(tài)改變协怒，通常最好使用計算屬性或 watcher 取而代之涝焙。
7.組件銷毀之前
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);
},
實例銷毀之前調(diào)用。在這一步孕暇，實例仍然完全可用
8.組件銷毀完成
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)
}
Vue 實例銷毀后調(diào)用仑撞。調(diào)用后赤兴，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除隧哮，所有的子實例也會被銷毀桶良。
有些業(yè)務(wù)是離開頁面訪問后臺接口改變數(shù)據(jù)的，可以放在銷毀兩個生命周期中近迁。
