Vue入門和基礎（二）
生命週期函數：
每個Vue實例被創建的時候都要經歷一系列的初始化過程，這個過程就是Vue的生命週期
先上一張官圖
其實官網上已經表明的很詳細了，從圖中我們可以看一個Vue實例的一整個生命週期中有很多個鉤子函數，不用的鉤子函數提供給我們在不同的時期進行操作，如圖我們可以看出一共有八個這樣的函數：
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
下面就是一一介紹：
先上一段代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的初始化過程</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'This is a APP'
},
beforeCreate: function() {
console.group('------beforeCreate創建前狀態------');
console.log("el : " + this.$el); //undefined
console.log("data : " + this.$data); //undefined
console.log("message: " + this.message)
},
created: function() {
console.group('------created創建完畢狀態------');
console.log("el : " + this.$el); //undefined
console.log("data : " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount掛載前狀態------');
console.log("el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("data : " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted 掛載結束狀態------');
console.log("el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("data : " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
},
})
</script>
</html>
運行代碼在控制檯查看得到結果：
我們可以看出在初始化之前，進行了數據的觀測，而在created的時候 data已經進行了綁定。但是el還是undefined；
beforeMount - mounted：
這個時候對el是否存在進行了判斷，如果存在就繼續，如果不存在，Vue的生命週期在此處就結束了，el就是當前實例化掛載的dom節點。而在mounted之後，h1標籤中的{{message}}變成了 This is a APP；
beforeUpdate - updated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的初始化過程</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<p>{{num}}</p>
<button @click="add()">Add</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'This is a APP',
num:1,
},
methods:{
add:function () {
this.num++;
}
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態===============》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
updated: function () {
console.group('updated 更新完成狀態===============》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 銷燬前狀態===============》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
destroyed: function () {
console.group('destroyed 銷燬完成狀態===============》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message)
}
})
</script>
</html>
運行上述代碼並點擊Add按鈕控制檯查看結果
這兩個函數組件更新時觸發。
beforeDestroy-destroyed：
beforeDestroy鉤子函數在實例銷燬之前調用。但是在此時，實例依然可以調用。
destroyed鉤子函數在Vue 實例銷燬後調用。整個實例被銷燬。