Vue 實例以及生命週期

//html
<div id="app">
  {{message}}
</div>

//javascript
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

　　因爲 Vue 借鑑了 MVVM 的思想，這裏的字符串 "Hello Vue!" 就至關於 Model，DOM 就至關於 View，Vue 實例 "vm" 則是起鏈接 Mode 和 View 做用的 ViewModel，所以咱們才得以經過數據驅動視圖，而不須要關心它是怎麼實現的，由於 Vue 已經幫咱們作好了一切。html

　　Vue 實例內置的屬性和方法都是以 "$" 開頭的，例如：vm.$data、vm.$el 等，另外選項並不等於實例，選項是經過 new Vue() 構造函數時傳入的參數對象，可是實例能夠從暴露的接口訪問某些選項的值，例如：console.log(vm.$data.message) 輸出 "Hello Vue!"。java

　　在建立實例的過程當中，Vue 提供了一些生命週期鉤子函數，容許咱們再某一特定階段執行一些額外的操做：數據庫

beforeCreate：後端

在實例初始化以後，數據綁定以前會調用這個函數，例如：app

//javascript
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate: function() {
    console.log(this.message);  //undefind
  }
})

須要說明的有兩點：一、這裏的 "this" 指向 Vue 實例，即 "vm"，二、Vue 實例同時也代理了選項中 "data" 下的全部屬性，也就是說 vm.message == vm.$data.message == "Hello Vue!"，可是由於在這個階段數據並無綁定到 Vun 實例上面，因此輸出 "undefind"。在這以前數據會先保存在 vm.$options 中，若是要在這個階段獲取數據，能夠先經過 vm.$options.data() 方法，返回 "data" 對象，經過 vm.$options.data().message 返回對應的值。函數

在這個階段能夠作一些不須要數據的工做，好比說開啓全局 loading 效果。this

created：spa

在實例建立完成，數據綁定以後會調用這個函數，此時 console.log(this.message) 輸出正確的值 "Hello Vue!"。

在這個階段，數據已經初始化爲選項中的默認值，可是真實的數據還要經過 ajax 從後端數據庫獲取，所以這個階段能夠向後端發請求獲取數據，而後綁定到對應屬性上。

以後判斷選項中有無 "el" 屬性(做爲 Vue 實例的掛載目標，在這裏就是 id 爲 app 的 div 標籤)，若是沒有，則須要手動調用 vm.$mount(el) 方法指定掛載的目標；

接着判斷選項中有無 "template" 屬性，若是沒有，則直接使用 "el" 屬性指定的掛載目標，若是有，那麼就用 "template" 屬性指定的字符串模板替換掛載目標，掛載目標中的全部內容將被忽略；

beforeMount：

在實例掛載以前調用。

在這個階段能夠移除全局 loading 效果。

mounted：

在實例掛載以後調用。

在這個階段頁面已經加載完畢，能夠對 DOM 進行操做。

beforeUpdate：

在數據更新時調用。

在這個階段能夠在數據更新前訪問現有的 DOM。

updated：

在數據更新以後調用。

在這個階段能夠對更新後的 DOM 進行操做。

beforeDestroy

在實例銷燬以前調用

destroy

在實例銷燬以後調用