Vue 實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue生命周期學習</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<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)
},
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>
</html>
1. 在BEFORECREATE和CREATED鈎子函數之間的生命周期
創建vue實例，vue(),在創建vue實例的時候執行了init(),在執行init()的時候調用beforeCtreate鈎子函數，監聽data數據，初始化vue內部事件，進行屬性和方法計算，然后調用create鈎子函數，created的時候數據已經和data屬性進行綁定,此時還是沒有el
2. CREATED鈎子函數和BEFOREMOUNT間的生命周期
首先會判斷對象是否有el選項。如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就意味着停止了生命周期，直到在該vue實例上調用vm.$mount(el)。
模板編譯，把data對象里面的數據和vue語法寫的模板編譯成HTML。編譯過程分三種情況：1）實例內部有template屬性，直接調用，然后調用render函數去渲染；2）沒有該屬性調用外部html；3）都沒有拋出錯誤；
編譯模板完成，調用beforeMount鈎子函數；
3. BEFOREMOUNT和MOUNTED 鈎子函數間的生命周期
此時是給vue實例對象添加$el成員，並且替換掉掛在的DOM元素。因為在之前console中打印的結果可以看到beforeMount之前el上還是undefined
掛載結束，調用Mounted鈎子函數；
4. MOUNTED
在mounted之前h1中還是通過進行占位的，因為此時還有掛在到頁面上，還是JavaScript中的虛擬DOM形式存在的。在mounted之后可以看到h1中的內容發生了變化。
5. BEFOREUPDATE鈎子函數和UPDATED鈎子函數間的生命周期
當vue發現data中的數據發生了改變，會觸發對應組件的重新渲染，先后調用beforeUpdate和updated鈎子函數。我們在console中輸入：
vm.message = '觸發組件更新'
發現觸發了組件的更新：
6.BEFOREDESTROY和DESTROYED鈎子函數間的生命周期
BeforeDestroy鈎子函數在實例銷毀之前調用。在這一步，實例仍然完全可用。
destroyed鈎子函數在Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
1、什么是vue生命周期？
答： Vue 實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。
2、vue生命周期的作用是什么？
答：它的生命周期中有多個事件鈎子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。
3、vue生命周期總共有幾個階段？
答：它可以總共分為8個階段：創建前/后, 載入前/后,更新前/后,銷毀前/銷毀后
4、第一次頁面加載會觸發哪幾個鈎子？
答：第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鈎子
5、DOM 渲染在 哪個周期中就已經完成？
答：DOM 渲染在 mounted 中就已經完成了。
6、簡單描述每個周期具體適合哪些場景？
答：生命周期鈎子的一些使用方法： beforecreate : 可以在這加個loading事件，在加載實例時觸發 created : 初始化完成時的事件寫在這里，如在這結束loading事件，異步請求也適宜在這里調用 mounted : 掛載元素，獲取到DOM節點 updated : 如果對數據統一處理，在這里寫上相應函數 beforeDestroy : 可以做一個確認停止事件的確認框 nextTick : 更新數據后立即操作dom