Vue 框架的入口就是 Vue 實(shí)例，其實(shí)就是框架中的 view model ，它包含頁面中的業(yè)務(wù)處理邏輯、數(shù)據(jù)模型等，它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實(shí)例的過程時更容易形成好的邏輯。

Vue 實(shí)例

在文檔中經(jīng)常會使用 vm 這個變量名表示 Vue 實(shí)例，在實(shí)例化 Vue 時，需要傳入一個選項(xiàng)對象，它可以包含數(shù)據(jù)(data)、模板(template)、掛載元素(el)、方法(methods)、生命周期鉤子(lifecyclehook)等選項(xiàng)。

Vue 實(shí)例化的選項(xiàng)

需要注意的是含 this 的函數(shù)大多不要使用箭頭函數(shù)，因?yàn)槲覀兤谕?this 指向 Vue 實(shí)例。

data

Vue 實(shí)例的數(shù)據(jù)都保存在 data 對象中，Vue 將會遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。

var data = { a: 1 }// 直接創(chuàng)建一個實(shí)例var vm = new Vue({ data: data})vm.a // -> 1vm.$data === data // -> true

這樣數(shù)據(jù)就綁定在 HTML 中，Vue 框架監(jiān)視 data 的數(shù)據(jù)變化，自動更新 HTML 內(nèi)容。

computed

計(jì)算屬性將被混入到 Vue 實(shí)例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue

實(shí)例。

var vm = new Vue({ data: { a: 1 }, computed: { // 僅讀取，值只須為函數(shù) aDouble: function () {  return this.a * 2 }, // 讀取和設(shè)置 aPlus: {  get: function () {  return this.a + 1  },  set: function (v) {  this.a = v - 1  } } }})vm.aPlus // -> 2vm.aPlus = 3vm.a  // -> 2vm.aDouble // -> 4

這里可以省略setter,如果省略了setter，那么值就可以是普通函數(shù)，但是必須有返回值。

methods

methods 將被混入到 Vue 實(shí)例中。可以直接通過 VM 實(shí)例訪問這些方法，或者在指令表達(dá)式中使用。方法中的 this 自動綁定為 Vue 實(shí)例。

var vm = new Vue({ data: { a: 1 }, methods: { plus: function () {  this.a++ } }})vm.plus()vm.a // 2

看下面這個例子，methods 和 computed 看起來可以做同樣的事情，單純看結(jié)果兩種方式確實(shí)是相同的。然而，不同的是計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值。這就意味著只要 message 還沒有發(fā)生改變，多次訪問 reversedMessage 計(jì)算屬性會立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。相比而言，只要發(fā)生重新渲染，method 調(diào)用總會執(zhí)行該函數(shù)。

var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () {  // `this` points to the vm instance  return this.message.split('').reverse().join('') } }})

watch

一個對象，鍵是需要觀察的表達(dá)式，值是對應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對象。Vue實(shí)例將會在實(shí)例化時調(diào)用 $watch()，遍歷 watch 對象的每一個屬性。