前言
用Vue也有一段時間了,發現生命週期是很重要的一部分,稍微懂得了一些東西,特地來分享一下.
生命週期和鈎子函數-介紹
啥也不説先上圖
圖-1為 Vue 1.0 生命週期圖,圖-2為 Vue 2.0 生命週期圖,圖-3為Vue 1.0 和 Vue 2.0 鈎子函數比較
重點看 Vue 2.0
生命週期和鈎子函數-具體
上代碼
自己粘走執行
<!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 : "Hello 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)
},
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 掛載結束狀態===============》');
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>
</body>
</html>打開F12可以查看生命週期各個時期的鈎子函數的狀態,如下圖
由上圖知:
1.beforeCrete: 此時,$el和data都為undefined,沒有初始化
2.created: 創建後data初始化了,而$el沒有
3.brforeMount: 掛在之前,$el和data都初始化了
4.mounted: Vue實例掛載完成了
注意: beforeMount紅色矩形框裏是{{message}},mounted的紅矩形框裏是xuxiao is boy,説明掛載前$el的值為'虛擬'的元素節點,掛載後'虛擬'的Dom節點被真實的Dom節點替換
數據更新(update)
在控制枱裏輸入app.message = '數據更新'後
如下圖
由此可見,當data數據變化時只會觸發update
Vue實例解耦(destroy)
在控制枱裏輸入app.$destroy();
如下圖
由圖知:
執行完destroy操作後,data裏的數據沒有變化,但是Dom結構還存在,也就是Vue實例不再受控制了,完成了解耦
生命週期和鈎子函數-總結
如下圖
這是把官方 Vue 2.0 生命週期的圖例簡化後的
生命週期鈎子函數使用
beforecreate : 舉個栗子：可以在這加個loading事件
created ：在這結束loading，還做一些初始化，實現函數自執行
mounted ： 在這發起後端請求，拿回數據，配合路由鈎子做一些事情
beforeDestory： 你確認刪除XX嗎？ destoryed ：當前組件已被刪除，清空相關內容
最後的寄語
第一次在segmentfault寫東西,寫的不對的地方請多多見諒,也請幫我指正出來!
參考文章
https://segmentfault.com/a/11...
http://www.cnblogs.com/gagag/...
