Vue.js 2.0 實(shí)例

構(gòu)造器

每個(gè) Vue.js 應(yīng)用都是通過構(gòu)造函數(shù) Vue 創(chuàng)建一個(gè) Vue 的根實(shí)例 啟動(dòng)的：

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

雖然沒有完全遵循 MVVM 模式， Vue 的設(shè)計(jì)無疑受到了它的啟發(fā)。因此在文檔中經(jīng)常會(huì)使用 vm 這個(gè)變量名表示 Vue 實(shí)例。

在實(shí)例化 Vue 時(shí)，需要傳入一個(gè)選項(xiàng)對(duì)象，它可以包含數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子等選項(xiàng)。全部的選項(xiàng)可以在 API 文檔 中查看。

可以擴(kuò)展 Vue 構(gòu)造器，從而用預(yù)定義選項(xiàng)創(chuàng)建可復(fù)用的組件構(gòu)造器：

var MyComponent = Vue.extend({
  // 擴(kuò)展選項(xiàng)
})
// 所有的 `MyComponent` 實(shí)例都將以預(yù)定義的擴(kuò)展選項(xiàng)被創(chuàng)建
var myComponentInstance = new MyComponent()

盡管可以命令式地創(chuàng)建擴(kuò)展實(shí)例，不過在多數(shù)情況下建議將組件構(gòu)造器注冊(cè)為一個(gè)自定義元素，然后聲明式地用在模板中。我們將在后面的“組件系統(tǒng)”中詳細(xì)說明?，F(xiàn)在你只需知道所有的 Vue.js 組件其實(shí)都是被擴(kuò)展的 Vue 實(shí)例。

屬性與方法

每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性：

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 設(shè)置屬性也會(huì)影響到原始數(shù)據(jù)
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

注意只有這些被代理的屬性是響應(yīng)的。如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上，它不會(huì)觸發(fā)視圖更新。我們將在后面詳細(xì)討論響應(yīng)系統(tǒng)。

除了 data 屬性， Vue 實(shí)例暴露了一些有用的實(shí)例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的 data 屬性區(qū)分。例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一個(gè)實(shí)例方法
vm.$watch('a', function (newVal, oldVal) {
  // 這個(gè)回調(diào)將在 `vm.a`  改變后調(diào)用
})

注意，不要在實(shí)例屬性或者回調(diào)函數(shù)中（如 vm.$watch('a', newVal => this.myMethod())）使用箭頭函數(shù)。因?yàn)榧^函數(shù)綁定父上下文，所以 this 不會(huì)像預(yù)想的一樣是 Vue 實(shí)例，而是 this.myMethod 未被定義。

實(shí)例屬性和方法的完整列表中查閱 API 參考。

實(shí)例生命周期

每個(gè) Vue 實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程。例如，實(shí)例需要配置數(shù)據(jù)觀測(cè)(data observer)、編譯模版、掛載實(shí)例到 DOM ，然后在數(shù)據(jù)變化時(shí)更新 DOM 。在這個(gè)過程中，實(shí)例也會(huì)調(diào)用一些生命周期鉤子 ，這就給我們提供了執(zhí)行自定義邏輯的機(jī)會(huì)。例如，created 這個(gè)鉤子在實(shí)例被創(chuàng)建之后被調(diào)用：

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

也有一些其它的鉤子，在實(shí)例生命周期的不同階段調(diào)用，如 mounted、 updated、destroyed 。鉤子的 this 指向調(diào)用它的 Vue 實(shí)例。一些用戶可能會(huì)問 Vue.js 是否有“控制器”的概念？答案是，沒有。組件的自定義邏輯可以分布在這些鉤子中。

生命周期圖示

下圖說明了實(shí)例的生命周期。你不需要立馬弄明白所有的東西，不過以后它會(huì)有幫助。