一,前言
終於要開始介紹Vue的生命週期了,雖然很多書和教程開篇就會講生命週期
但我們之前介紹Vue使用時基本沒有涉及到生命週期的知識
所以我選擇等到對Vue的使用有了大概瞭解時,再介紹Vue,這樣更有針對性
這篇Vue生命週期暫時只介紹Vue2.0相關的生命週期內容
關於Vue1.0中已經廢棄的鉤子,日後有時間再補充進來,主要加強對生命週期的理解
廢話不多說,開始Vue生命週期吧
二,什麼是生命週期,什麼是鉤子?
每個 Vue 實例在被創建時都要經過一系列的初始化過程
例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。
在整個實例的創建過程中,也會運行一些叫做生命週期鉤子的函數
Vue在特定的一些階段允許我們"介入"創建流程
這些允許我們介入的時機點,以回調函數的形式供我們插入自己的邏輯
這些回調函數就是鉤子,也叫HOOK
三,Vue生命週期提供了哪些鉤子及其作用
官網Vue生命週期的流程圖:
圖中可以看到在vue整個生命週期中,有哪些鉤子函數
它們分別在Vue整個初始化階段的哪個時機點給了我們介入生命週期進行操作的機會
全部鉤子函數:
beforeCreate:
在Vue實例化開始時被調用,
此時數據監聽,事件等尚未初始化
created:
在Vue實例創建完成後被調用,
此時已完成數據綁定,事件方法,
但尚未開始DOM編譯,即未掛載到document中
beforeMount:
在mounted前被調用
mounted:
在編譯結束時調用
此時,所有指令已生效,數據變化已可以出發DOM更新,但不保證#el已插入文檔
beforeUpdate:
實例掛載後,再次更新實例時被調用,
此時還未對DOM進行更新
updated:
實例掛載後,再次更新實例且更新DOM完成時被調用
beforeDestroy:
開始銷燬實例時被調用,
此時實例仍處於可用狀態
destroyed:
實例銷燬後被調用,
此時所有綁定和實例指令已經解綁完成,子實例已被銷燬
四,Vue生命週期的分析
通過以上各個生命週期的作用和注意事項,已經對作用有了大概瞭解
對比在不同的鉤子中主要涉及以下幾個焦點問題:
數據監聽是否可用
是否已掛載,DOM是否編譯完成
下面通過一個Demo驗證,在不同階段的回調函數中,Vue實例的各種數據狀態
<script>
// 用於在各個鉤子中輸出各選項狀態
function output(vm){
if (typeof(vm.$el) == "undefined"){
console.log("el == 'undefined'");
}else{
console.log("el != 'undefined' 對el進行打印:");
console.log(vm.$el);
}
console.log("data: " + JSON.stringify(vm.$data));
console.log("message: " + vm.message)
}
var vm = new Vue({
el: '#app',
data: {
message: 'Vue生命週期Demo'
},
beforeCreate: function() {
console.group('------ beforeCreate:Vue實例開始創建 ------');
console.log("此時數據監聽,事件等尚未初始化");
output(this);
},
created: function() {
console.group('------ created:Vue實例創建完成 ------');
console.log("已完成數據綁定,事件的初始化,但DOM未編譯");
output(this);
},
beforeMount: function() {
console.group('------ beforeMount:掛載前 ------');
output(this);
},
mounted: function() {
console.group('------ mounted:掛載完成 -------');
console.log("所有指令已生效,數據變化已可以出發DOM更新");
output(this);
},
beforeUpdate: function () {
console.group('------ beforeUpdate:更新前 ------');
console.log("此時還未對DOM進行更新");
output(this);
},
updated: function () {
console.group('------ updated:更新完成 ------');
console.log("DOM已完成更新");
output(this);
},
beforeDestroy: function () {
console.group('------beforeDestroy:Vue實例銷燬前------');
console.log("實例開始銷燬,但仍處於可用狀態");
output(this);
},
destroyed: function () {
console.group('------destroyed:Vue實例銷燬完成------');
console.log("實例銷燬完成,所有綁定和實例指令已經解綁完成,子實例已被銷燬");
output(this);
}
})
</script>Vue生命週期Demo-初始化:
通過控制檯或使用devTools修改message值,觸發更新,查看更新對生命週期的影響:
分析:
beforeCreate:
此時尚未開始初始化Vue實例
created:
此時數據綁定,事件已完成初始化,data和message已經可以取值
beforeMount:
這時可以拿到el值,但還是通過{{message}}進行佔位的,
此時是以在JavaScript中虛擬DOM形式存在,還未掛載到頁面上
mounted:
此時的{{message}}已經完成了替換,但並不保證#el已插入文檔
beforeUpdate:
通過改變message值吃法更新,先執行beforeUpdate鉤子
發現此時雖然data和message都已更新,但el中的文字顯示仍爲之前顯示
此時DOM尚未進行更新
updated:
此時DOM完成更新
beforeDestroy:
開始銷燬Vue實例,此時實例仍處於可用狀態
destroyed:
Vue實例銷燬完成,所有綁定和實例指令已解綁,子實例已銷燬
五,結尾
本篇對Vue生命週期做了簡單介紹
包括全部生命週期鉤子函數的作用和注意事項
通過Demo打印了在各個生命週期鉤子中的數據狀態
其實生命週期這部分知識還有很多沒有說到,例如圖中查找el和template這部分,
但是就目前這些基本也夠用的,關於未介紹的部分後續會繼續補充進來