Vue生命周期
Vue實例需要經過創建、初始化數據、編譯模板、掛載DOM、渲染、更新、渲染、卸載等一系列過程，這個過程就是Vue的生命周期，在Vue的整個生命周期中提供很多鈎子函數在生命周期的不同時刻調用，Vue中提供的鈎子函數有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
示例
在實例化Vue過程中，會直接觸發的生命周期有beforeCreate、created、beforeMount、mounted，在數據更新的過程中觸發的生命周期有beforeUpdate、updated，在銷毀組件的過程中觸發的生命周期有beforeDestroy、destroyed。
<!DOCTYPE html>
<html>
<head>
<title>Vue生命周期</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<button @click="updateMsg">updateMsg</button>
<button @click="destroyVue">destroyVue</button>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Vue Lifecycle'
},
beforeCreate: function() {
console.log("beforeCreate");
console.log(this.$el); //undefined
console.log(this.$data); //undefined
console.log(this.msg); // undefined
console.log("--------------------");
},
created: function() {
console.log("created");
console.log(this.$el); //undefined
console.log(this.$data); //{__ob__: Observer}
console.log(this.msg); // Vue Lifecycle
console.log("--------------------");
},
beforeMount: function() {
console.log("beforeMount");
console.log(this.$el); //<div id="app">...</div>
console.log(this.$data); // {__ob__: Observer}
console.log(this.msg); // Vue Lifecycle
console.log("--------------------");
},
mounted: function() {
console.log("mounted");
console.log(this.$el); //<div id="app">...</div>
console.log(this.$data); //{__ob__: Observer}
console.log(this.msg); // Vue Lifecycle
console.log("--------------------");
},
beforeUpdate: function () {
console.log("beforeUpdate");
console.log(this.$el);
console.log(this.$data);
console.log(this.msg);
debugger;
console.log("--------------------");
},
updated: function () {
console.log("updated");
console.log(this.$el);
console.log(this.$data);
console.log(this.msg);
console.log("--------------------");
},
beforeDestroy: function () {
console.log("beforeDestroy");
console.log(this.$el);
console.log(this.$data);
console.log(this.msg);
console.log("--------------------");
},
destroyed: function () {
console.log("destroyed");
console.log(this.$el);
console.log(this.$data);
console.log(this.msg);
console.log("--------------------");
},
methods:{
updateMsg: function(){
this.msg = "Vue Update";
},
destroyVue: function(){
this.$destroy();
}
}
})
</script>
</html>
beforeCreate
從Vue實例開始創建到beforeCreate鈎子執行的過程中主要進行了一些初始化操作，例如組件的事件與生命周期鈎子的初始化。在此生命周期鈎子執行時組件並未掛載，data、methods等也並未綁定，此時主要可以用來加載一些與Vue數據無關的操作，例如展示一個loading等。
console.log("beforeCreate");
console.log(this.$el); //undefined
console.log(this.$data); //undefined
console.log(this.msg); // undefined
console.log("--------------------");
created
從beforeCreate到created的過程中主要完成了數據綁定的配置、計算屬性與方法的掛載、watch/event事件回調等。在此生命周期鈎子執行時組件未掛載到到DOM，屬性$el目前仍然為undefined，但此時已經可以開始操作data與methods等，只是頁面還未渲染，在此階段通常用來發起一個XHR請求。
console.log("created");
console.log(this.$el); //undefined
console.log(this.$data); //{__ob__: Observer}
console.log(this.msg); // Vue Lifecycle
console.log("--------------------");
beforeMount
從created到beforeMount的過程中主要完成了頁面模板的解析，在內存中將頁面的數據與指令等進行解析，當頁面解析完成，頁面模板就存在於內存中。在此生命周期鈎子執行時$el被創建，但是頁面只是在內存中，並未作為DOM渲染。
console.log("beforeMount");
console.log(this.$el); //<div id="app">...</div>
console.log(this.$data); // {__ob__: Observer}
console.log(this.msg); // Vue Lifecycle
console.log("--------------------");
mounted
從beforeMount到mounted的過程中執行的是將頁面從內存中渲染到DOM的操作。在此生命周期鈎子執行時頁面已經渲染完成，組件正式完成創建階段的最后一個鈎子，即將進入運行中階段。此外關於渲染的頁面模板的優先級，是render函數 > template屬性 > 外部HTML。
console.log("mounted");
console.log(this.$el); //<div id="app">...</div>
console.log(this.$data); //{__ob__: Observer}
console.log(this.msg); // Vue Lifecycle
console.log("--------------------");
beforeUpdate
當數據發生更新時beforeUpdate鈎子便會被調用，此時Vue實例中數據已經是最新的，但是在頁面中的數據還是舊的，在此時可以進一步地更改狀態，這不會觸發附加的重渲染過程。在上述例子中加入了debugger斷點，可以觀察到Vue實例中數據已經是最新的，但是在頁面中的數據還是舊的。
// this.msg = "Vue Update";
console.log("beforeUpdate");
console.log(this.$el); //<div id="app">...</div>
console.log(this.$data); //{__ob__: Observer}
console.log(this.msg); // Vue Update
debugger;
console.log("--------------------");
updated
當數據發生更新並在DOM渲染完成后updated鈎子便會被調用，在此時組件的DOM已經更新，可以執行依賴於DOM的操作。
// this.msg = "Vue Update";
console.log("updated");
console.log(this.$el); //<div id="app">...</div>
console.log(this.$data); //{__ob__: Observer}
console.log(this.msg); // Vue Update
console.log("--------------------");
beforeDestroy
在Vue實例被銷毀之前beforeDestroy鈎子便會被調用，在此時實例仍然完全可用。
// this.$destroy();
console.log("beforeDestroy");
console.log(this.$el); //<div id="app">...</div>
console.log(this.$data); //{__ob__: Observer}
console.log(this.msg); // Vue Update
console.log("--------------------");
destroyed
在Vue實例被銷毀之后destroyed鈎子便會被調用，在此時Vue實例綁定的所有東西都會解除綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀，組件無法使用，data和methods也都不可使用，即使更改了實例的屬性，頁面的DOM也不會重新渲染。
// this.$destroy();
console.log("destroyed");
console.log(this.$el); //<div id="app">...</div>
console.log(this.$data); //{__ob__: Observer}
console.log(this.msg); // Vue Update
console.log("--------------------");
每日一題
https://github.com/WindrunnerMax/EveryDay
參考
https://www.jianshu.com/p/672e967e201c
https://cn.vuejs.org/v2/guide/instance.html
https://segmentfault.com/a/1190000011381906
https://segmentfault.com/a/1190000018331135
https://www.cnblogs.com/qidh/p/11431998.html
https://www.cnblogs.com/wangjiachen666/p/9497749.html