101
vue實例
構造器
每個 Vue.js 應用都是通過構造函數 Vue 創建一個 Vue 的根實例 啟動的：
var vm = new Vue({
// 選項
})
雖然沒有完全遵循 MVVM 模式， Vue 的設計無疑受到了它的啟發。因此在文檔中經常會使用 vm (ViewModel 的簡稱) 這個變量名表示 Vue 實例
在實例化 Vue 時，需要傳入一個選項對象，它可以包含數據、模板、掛載元素、方法、生命周期鉤子等選項
可以擴展 Vue 構造器，從而用預定義選項創建可複用的組件構造器：
var MyComponent = Vue.extend({
// 擴展選項
})
var myComponentInstance = new MyComponent() // 所有的 `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
注意：隻有這些被代理的屬性是響應的。如果在實例創建之後添加新的屬性到實例上，它不會觸發視圖更新
除了 data 屬性， Vue 實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的 data 屬性區分。例如：
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
vm.$watch('a', function (newVal, oldVal) { // $watch 是一個實例方法
// 這個回調將在 `vm.a` 改變後調用
})
注意：不要在實例屬性或者回調函數中（如 vm.$watch('a', newVal => this.myMethod())）使用箭頭函數。因為箭頭函數綁定父上下文，所以 this 不會像預想的一樣是 Vue 實例，而是 this.myMethod 未被定義
實例生命周期
每個 Vue 實例在被創建之前都要經過一係列的初始化過程。例如，實例需要配置數據觀測(data observer)、編譯模版、掛載實例到 DOM ，然後在數據變化時更新 DOM 。在這個過程中，實例也會調用一些 生命周期鉤子 ，這就給我們提供了執行自定義邏輯的機會。例如，created 這個鉤子在實例被創建之後被調用：
var vm = new Vue({
data: {
a: 1
},
created: function () {
console.log('a is: ' + this.a) // `this` 指向 vm 實例
}
}) // -> "a is: 1"
也有一些其它的鉤子，在實例生命周期的不同階段調用，如 mounted、 updated 、destroyed 。鉤子的 this 指向調用它的 Vue 實例。一些用戶可能會問 Vue.js 是否有“控製器”的概念？答案是，沒有。組件的自定義邏輯可以分布在這些鉤子中
生命周期圖
最後更新：2017-06-09 12:01:24