vue生命周期
Vue 實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列
過程，我們稱這是 Vue 的生命周期。其實 Vue 實例從創建到銷毀的過程，就是生命周期。生命周期官方文件的圖例為：
根據以上圖可以看出生命周期有八個階段：
1、beforeCreate（創建前）
在實例初始化之後，數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。
2、created（創建後）
在實例創建完成後被立即調用。在這一步，實例已完成以下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el
3、beforeMount(載入前)
在掛載開始之前被調用：相關的 render 函數首次被調用。
該鉤子在服務器端渲染期間不被調用。
4、mounted（載入後）
el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
註意 mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted：
該鉤子在服務器端渲染期間不被調用。
5、beforeUpdate（更新前）
數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。
你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
該鉤子在服務器端渲染期間不被調用。
6、updated（更新後）
由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會調用該鉤子。
當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用計算屬性或 watcher 取而代之。
註意 updated
updated：
updated: function () {
this.$nextTick(function () {
// 需要執行的代碼
})
}
該鉤子在服務器端渲染期間不被調用。
7、beforeDestroy（銷毀前）
實例銷毀之前調用。在這一步，實例仍然完全可用。
該鉤子在服務器端渲染期間不被調用。
8、destroyed（銷毀後）
Vue 實例銷毀後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
該鉤子在服務器端渲染期間不被調用。
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue生命周期</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ textArea }}</p>
<input type="text" name="textArea" v-model="textArea">
</div>
<script>
var app = new Vue({
el: ‘#app‘,
data: {
textArea: ‘aa‘
},
beforeCreate: function () {
console.log(‘beforeCreate執行,顯示值為 ‘+ this.textArea)
},
created: function () {
console.log(‘created執行,顯示值為 ‘+ this.textArea)
},
beforeMount: function () {
console.log(‘beforeMount執行,顯示值為 ‘+ this.textArea)
},
mounted: function () {
console.log(‘mounted執行,顯示值為 ‘+ this.textArea)
},
beforeUpdate: function () {
console.log(‘beforeUpdate執行,顯示值為 ‘+ this.textArea)
},
updated: function () {
console.log(‘updated執行,顯示值為 ‘+ this.textArea)
},
beforeDestroy: function () {
console.log(‘beforeDestroy執行,顯示值為 ‘+ this.textArea)
},
destroyed: function () {
console.log(‘destroyed執行,顯示值為 ‘+ this.textArea)
}
});
</script>
</body>
</html>
運行結果：
打開頁面時：
控制臺輸出：
更新input的值為‘bb‘後，界面如下：
控制臺輸出為：
vue生命周期