Vue 實例

構造器

每一個 Vue.js 應用的起步都是經過構造函數 Vue 建立一個 Vue 的根實例：

var vm = new Vue({
  // 選項
})

一個 Vue 實例其實正是一個 MVVM 模式中所描述的 ViewModel - 所以在文檔中常常會使用vm 這個變量名。

在實例化 Vue 時，須要傳入一個選項對象，它能夠包含數據、模板、掛載元素、方法、生命週期鉤子等選項。所有的選項能夠在 API 文檔中查看。

能夠擴展 Vue 構造器，從而用預約義選項建立可複用的組件構造器：

var MyComponent = Vue.extend({
  // 擴展選項
})

// 全部的 `MyComponent` 實例都將以預約義的擴展選項被建立
var myComponentInstance = new MyComponent()

儘管能夠命令式地建立擴展實例，不過在多數狀況下將組件構造器註冊爲一個自定義元素，而後聲明式地用在模板中。咱們將在後面詳細說明組件系統。如今你只需知道全部的 Vue.js 組件其實都是被擴展的 Vue 實例。

屬性與方法

每一個 Vue 實例都會代理其 data 對象裏全部的屬性：

var data = { a: 1 }
var vm = new Vue({
  data: data
})

vm.a === data.a // -> true

// 設置屬性也會影響到原始數據
vm.a = 2
data.a // -> 2

// ... 反之亦然
data.a = 3
vm.a // -> 3

注意只有這些被代理的屬性是響應的。若是在實例建立以後添加新的屬性到實例上，它不會觸發視圖更新。咱們將在後面詳細討論響應系統。

除了這些數據屬性，Vue 實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴$，以便與代理的數據屬性區分。例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true

// $watch 是一個實例方法
vm.$watch('a', function (newVal, oldVal) {
  // 這個回調將在 `vm.a`  改變後調用
})

實例生命週期

Vue 實例在建立時有一系列初始化步驟——例如，它須要創建數據觀察，編譯模板，建立必要的數據綁定。在此過程當中，它也將調用一些生命週期鉤子，給自定義邏輯提供運行機會。例如 created 鉤子在實例建立後調用：

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 實例
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"

也有一些其它的鉤子，在實例生命週期的不一樣階段調用，如 compiled、 ready、destroyed。鉤子的 this 指向調用它的 Vue 實例。一些用戶可能會問 Vue.js 是否有「控制器」的概念？答案是，沒有。組件的自定義邏輯能夠分割在這些鉤子中。

生命週期圖示

下圖說明了實例的生命週期。你不須要立馬弄明白全部的東西，不過之後它會有幫助。