實例生命週期鉤子
每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命週期鉤子的函數，這給了用戶在不同階段添加自己的代碼的機會。
比如 created 鉤子可以用來在一個實例被創建之後執行代碼：
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 實例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
也有一些其它的鉤子，在實例生命週期的不同階段被調用，如 mounted、updated和 destroyed。生命週期鉤子的 this 上下文指向調用它的 Vue 實例。
不要在選項屬性或回調上使用箭頭函數，比如
created: () => console.log(this.a) 或
vm.$watch('a', newValue => this.myMethod())。因爲箭頭函數是和父級上下文綁定在一起的，this 不會是如你所預期的 Vue 實例，經常導致
Uncaught TypeError: Cannot read property of undefined 或
Uncaught TypeError: this.myMethod is not a function 之類的錯誤。
生命週期圖示
下圖是Vue官網中的實例生命週期展示圖。
beforeCreate() {
// 這是第一個生命週期函數，表示實例完全被創建出來之前，會執行它
// 注意：在beforeCreate生命週期函數執行的時候，data和methods中的數據都還沒有沒初始化
},
created() {
// 在 created 中，data 和 methods 都已經被初始化好了！
// 如果要調用methods中的方法，或者操作 data 中的數據，最早只能在 created 中操作
},
beforeMount() {
// beforeMount生命週期函數，表示模板已經在內存中編輯完成了，但是尚未把 模板渲染到 頁面中
// 在 beforeMount 執行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字符串
},
mounted() {
// 這是遇到的第4個生命週期函數，表示，內存中的模板，已經真實的掛載到了頁面中，用戶已經可以看到渲染好的頁面了
// 注意：mounted是實例創建期間的最後一個生命週期函數，當執行完mounted就表示，實例已經被完全創建好了
},
// 接下來的是運行中的兩個事件
beforeUpdate() {
// 這時候，表示 我們的界面還沒有被更新【數據被更新了嗎？ 數據肯定被更新了】
// 得出結論： 當執行beforeUpdate的時候，頁面中的顯示的數據，還是舊的，此時data數據是最新的，頁面尚未和最新的數據保持同步
},
updated() {
// updated 事件執行的時候，頁面和 data 數據已經保持同步了，都是最新的
},
beforeDestroy() {
// 實例銷燬前觸發
},
destroyed() {
// 實例銷燬觸發
}