例項生命週期鉤子

每個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 之類的錯誤。也有一些其它的鉤子，在例項生命週期的不同階段被呼叫，如  mounted，updated 和  destroyed。生命週期鉤子的  this 上下文指向呼叫它的Vue例項。

生命週期圖示

下圖展示了例項的生命週期。你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。