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

Vue 實例

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

Vue 實例化的選項

需要注意的是含 this 的函數大多不要使用箭頭函數，因為我們期望 this 指向 Vue 實例。

data

Vue 實例的數據都保存在 data 對象中，Vue 將會遞歸將 data 的屬性轉換為 getter/setter，從而讓 data 的屬性能夠響應數據變化。

7vardata = { a: 1 }

// 直接創建一個實例

varvm =newVue({

data: data

})

vm.a// -> 1

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

這樣數據就綁定在 HTML 中，Vue 框架監視 data 的數據變化，自動更新 HTML 內容。

computed

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

實例。

var vm =newVue({

data: { a: 1 },

computed: {

// 僅讀取，值只須為函數

aDouble:function() {

returnthis.a * 2

},

// 讀取和設置

aPlus: {

get:function() {

returnthis.a + 1

},

set:function(v) {

this.a = v - 1

}

}

}

})

vm.aPlus// -> 2

vm.aPlus = 3

vm.a// -> 2

vm.aDouble// -> 4

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

methods

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

10varvm =newVue({

data: { a: 1 },

methods: {

plus:function() {

this.a++

}

}

})

vm.plus()

vm.a// 2

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

13varvm =newVue({

el:'#example',

data: {

message:'Hello'

},

computed: {

// a computed getter

reversedMessage:function() {

// `this` points to the vm instance

returnthis.message.split('').reverse().join('')

}

}

})

watch

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

19varvm =newVue({

data: {

a: 1,

b: 2,

c: 3

},

watch: {

// 監控a變量變化的時候，自動執行此函數

a:function(val, oldVal) {

console.log('new: %s, old: %s', val, oldVal)

},

// 深度 watcher

c: {

handler:function(val, oldVal) {/* ... */},

deep:true

}

}

})

vm.a = 2// -> new: 2, old: 1

Vue 實例的生命周期

Vue 實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。通俗說就是 Vue 實例從創建到銷毀的過程，就是生命周期。

在Vue的整個生命周期中，它提供了一些生命周期鉤子，給了我們執行自定義邏輯的機會。

接下來我們用幾個例子來看看生命周期鉤子是怎么用的：

HTML結構：

{{ number }}

我們對 input 和 p 綁定了data 對象的 number 數據，Vue 實例構建如下：

6varapp =newVue({

el:'#app',

data: {

number: 1

}

})

在實例中分別在每個生命周期鉤子中 console.log('鉤子名稱',this.number) 我們發現，第一次頁面加載時觸發了 beforeCreate, created, beforeMount, mounted 這幾個鉤子，data 數據在 created 中可獲取到。

再去 console.log('mounted: ', document.getElementsByTagName('p')[0]) ，DOM 渲染在 mounted 中已經

完成。

我們再試著去更改 input 輸入框中的內容，可以看到輸入框上方的數據同步發生改變，這就是數據綁定的效果，在更新數據時觸發 beforeUpdate 和 updated 鉤子，且在 beforeUpdate 觸發時，數據已更新完畢。

而 destroy 僅在調用app.$destroy();時觸發，對 vue 實例進行銷毀。銷毀完成后，我們再重新改變 number 的值，vue 不再對此動作進行響應了。但是原先生成的dom元素還存在，可以這么理解，執行了destroy操作，后續就不再受vue控制了。

Vue.nextTick

在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。

?

1

2

3Vue.nextTick(function() {

// DOM 更新了

})

官方還提供了一種寫法，vm.$nextTick，用 this 自動綁定到調用它的實例上

8created() {

setTimeout(() => {

this.number = 100

this.$nextTick(() => {

console.log('nextTick', document.getElementsByTagName('p')[0])

})

},100)

}

什么時候需要用的Vue.nextTick()

在 Vue 生命周期的 created() 鉤子函數進行的 DOM 操作一定要放在 Vue.nextTick() 的回調函數中。原因是什么呢，原因是在 created() 鉤子函數執行的時候 DOM 其實并未進行任何渲染，而此時進行 DOM 操作無異于徒勞，所以此處一定要將 DOM 操作的 js 代碼放進 Vue.nextTick() 的回調函數中。與之對應的就是 mounted 鉤子函數，因為該鉤子函數執行時所有的 DOM 掛載和渲染都已完成，此時在該鉤子函數中進行任何DOM操作都不會有問題 。

在數據變化后要執行的某個操作，而這個操作需要使用隨數據改變而改變的 DOM 結構的時候，這個操作都應該放進 Vue.nextTick() 的回調函數中。

生命周期小結

生命周期鉤子的一些使用方法：

beforecreate : 可以在這加個loading事件，在加載實例時觸發

created : 初始化完成時的事件寫在這里，如在這結束loading事件，異步請求也適宜在這里調用

mounted : 掛載元素，獲取到DOM節點

updated : 如果對數據統一處理，在這里寫上相應函數

beforeDestroy : 可以做一個確認停止事件的確認框

nextTick : 更新數據后立即操作dom