生命週期介紹
簡單說就是一個組件從開始到最後消亡所經歷的各種狀態，就是一個組件的生命週期
vue的生命週期圖
beforeCreate（創建前）
beforeCreate（初始化頁面前）
詳情：實例初始化之後，組件被創建時，這時候 el，data，message 都是 underfined
場景：可以加入 loading 事件；在服務器端的應用場景中，這個時候發送數據請求比較多一些
created（創建後）
created（初始化界面後）
詳情：實例創建完成後，data、methods 被初始化
場景：結束 loading 事件；推薦這個時候發送請求數據，尤其是返回的數據與綁定事件有關時
beforeMount（載入前）
beforeMount（渲染dom前）
詳情：完成el和data初始化，在掛載開始之前被調用
場景：可以發送數據請求
注意：在服務器端渲染期間不會被調用
mounted（載入後）
mounted（渲染dom後）
詳情：vue實例已經掛載到頁面中
場景：獲取 el 中 DOM 元素，進行 DOM 操作；如果返回的數據操作依賴 DOM 完成，推薦這個時候發送數據請求
注意：在服務器端渲染期間不會被調用
beforeUpdate（更新前）
beforeUpadated（更新數據前）
詳情：數據更新時調用
場景：掛載完成之前訪問現有DOM，比如手動移除已添加的事件監聽器；也可以進一步修改數據
注意：在服務器渲染期間不會被調用，只有初次渲染會在服務端調用
updated（更新後）
updated（更新數據後）
詳情：由於數據更改，重新渲染時調用
場景：可執行依賴與DOM的操作
注意：服務器端渲染期間不會被調用
beforeDestory（銷燬前）
beforeDestory（卸載組件前）
詳情：實例銷燬之前調用
場景：實例銷燬之前，執行清理任務，比如：清除定時器等
注意：服務器端渲染期間不會被調用
destoryed（銷燬後）
destroyed（卸載組件後）
詳情：vue實例銷燬後調用。調用後，Vue實例指示的所有東西都會被解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷燬
場景：提示已刪除
注意：服務器端渲染期間不會被調用
生命週期代碼的執行效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="change()">change</button>
<button v-on:click="destroy()">destroy</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 18
},
beforeCreate: function () {
console.group('beforeCreate 創建前');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
created: function () {
console.group('created 創建完畢');
console.log("el: " + this.$el);
console.log("data: " + this.$data + JSON.stringify(this.$data));
console.log("message: " + this.message)
},
beforeMount: function () {
console.group('beforeMount 掛載前');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
mounted: function () {
console.group('mounted 掛載結束');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
updated: function () {
console.group('updated 更新完成');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
beforeDestroy: function () {
console.group('beforeDestroy 銷燬前');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
destroyed: function () {
console.group('destroyed 銷燬完成');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
methods: {
change() {
app.message++;
},
destroy() {
app.$destroy();
}
}
})
</script>
</body>
</html>
頁面運行效果
點擊change的效果
點擊destroy的效果
最後
如果本文對你有幫助得話，給本文點個贊❤️❤️❤️
歡迎大家加入，一起學習前端，共同進步！
