Vue提高篇-生命週期及其鉤子函式
阿新 • • 發佈：2018-12-12
1.前言
（a）每個Vue例項在被建立之前都要經過一系列的初始化過程,這個過程就是vue的生命週期；
（b）vue一整個的生命週期中會有很多鉤子函式提供給我們在vue生命週期不同的時刻進行操作；
（c）鉤子函式中最為常用的是建立（created），掛載（mounted）的操作；
2.詳解
（a）圖示週期
（b）各階段詳解
| beforeCreate | 在例項初始化之後，資料觀測和事件、生命週期初始化配置之前被呼叫。 |
| created | 例項已經建立完成之後被呼叫。在這一步，例項已完成以下的配置：資料觀測，屬性和方法的運算，事件回撥。然而，掛載階段還沒開始，$el 屬性目前不可見。 應用場景：ajax請求獲取資料，初始化資料 |
| beforeMount | 在掛載開始之前被呼叫：相關的 render 函式首次被呼叫，此時有了虛擬DOM。 |
| mounted | el 被新建立的 vm.$el 替換，並掛載到例項上去之後呼叫該鉤子，渲染為真實DOM。 應用場景：掛載元素內DOM節點的獲取 |
| beforeUpdate | 在資料更新之前時呼叫，發生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。 |
| updated | 由於資料更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會呼叫該鉤子。 當這個鉤子被呼叫時，元件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限迴圈。 應用場景：任何資料的更新，如需統一邏輯處理 |
| beforeDestroy | 例項銷燬之前呼叫。此時，例項仍然是可用的。 |
| destroyed | vue 例項銷燬後呼叫。呼叫後，vue 例項指示的所有東西都會解綁，所有的事件監聽器會被解除安裝移除，所有的子例項也會被銷燬。 |
（c）程式碼使用
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命週期'
},
beforeCreate: function() {
console.group('------beforeCreate建立前狀態------');
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) //undefined
},
created: function() {
console.group('------created建立完畢狀態------');
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掛載前狀態------');
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 掛載結束狀態，ajax呼叫走起------');
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 更新前狀態===============》');
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 更新完成狀態===============》');
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 銷燬前狀態===============》');
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 銷燬完成狀態===============》');
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>