例項生命週期鉤子函式

beforeCreate    元件例項剛被建立，元件屬性計算之前，如data屬性等

created     元件例項建立完成，屬性已繫結，但DOM還未生成，$el屬性還不存在

beforeMount 模板編譯/掛載之前

mounted     模板編譯/掛載之後

beforeUpdate    元件更新之前

updated     元件更新之後

activated   for keep-alive，元件被啟用時呼叫

deactivated for keep-alive，元件被移除時呼叫

beforeDestory   元件銷燬前呼叫

destoryed   元件銷燬後呼叫
 

computed 屬性 這就是為什麼對於所有複雜邏輯，你都應該使用 computed 屬性

<div id="example">
  <p>初始 message 是："{{ message }}"</p>
  <p>計算後的翻轉 message 是："{{ reversedMessage }}"</p>
</div>

 computed: {
    // 一個 computed 屬性的 getter 函式

    reversedMessage: function () {

      // `this` 指向 vm 例項
 

      return this.message.split('').reverse().join('')
    }
  }

computed 屬性預設只設置 getter 函式，不過在需要時，還可以提供 setter 函式

computed: {
  fullName: {
    // getter 函式
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter 函式
    set: function (newValue) {
      var names = newValue.split(' '
 
)
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

method 方法 這裡不使用 computed 屬性，而是在 methods 中定義一個相同的函式。對於最終結果，這兩種方式確實恰好相同。

    然而，細微的差異之處在於，computed 屬性會基於它所依賴的資料進行快取。

    每個 computed 屬性，只有在它所依賴的資料發生變化時，才會重新取值(re-evaluate)。

    這就意味著，只要 message 沒有發生變化，多次訪問 computed 屬性 reversedMessage，將會立刻返回之前計算過的結果，
    而不必每次都重新執行函式。

    你可能不希望有快取，請使用 method 方法替代。

watch 屬性 Vue 其實還提供了一種更加通用的方式，來觀察和響應 Vue 例項上的資料變化：watch 屬性。watch 屬性是很吸引人的使用方式，
然而，當你有一些資料需要隨著另外一些資料變化時，過度濫用 watch 屬性會造成一些問題
- 尤其是那些具有 AngularJS 開發背景的開發人員。因此，更推薦的方式是，使用 computed 屬性，而不是命令式(imperative)的 watch 回撥函式。
- 當你需要監控某個變數，當其改變後進行某些操作，就用watch