最簡(jiǎn)單的Vue 實(shí)例

//html
<div id="app">
 {{message}}
</div>

//javascript
var vm = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

由于 Vue 借鑒了 MVVM 的思想，這里的字符串 "Hello Vue!" 就相當(dāng)于 Model，DOM 就相當(dāng)于 View，Vue 實(shí)例 "vm" 則是起連接 Mode 和 View 作用的 ViewModel，因此我們才得以通過數(shù)據(jù)驅(qū)動(dòng)視圖，而不需要關(guān)心它是怎么實(shí)現(xiàn)的，因?yàn)?Vue 已經(jīng)幫我們做好了一切。

Vue 實(shí)例內(nèi)置的屬性和方法都是以 "$" 開頭的，例如：vm.$data、vm.$el 等，另外選項(xiàng)并不等于實(shí)例，選項(xiàng)是通過 new Vue() 構(gòu)造函數(shù)時(shí)傳入的參數(shù)對(duì)象，但是實(shí)例可以從暴露的接口訪問某些選項(xiàng)的值，例如：console.log(vm.$data.message) 輸出 "Hello Vue!"。

實(shí)例的生命周期

在創(chuàng)建實(shí)例的過程中，Vue 提供了一些生命周期鉤子函數(shù)，允許我們?cè)倌骋惶囟A段執(zhí)行一些額外的操作：

beforeCreate：

在實(shí)例初始化之后，數(shù)據(jù)綁定之前會(huì)調(diào)用這個(gè)函數(shù)，例如：

//javascript
var vm = new Vue({
 el: '#app',
 data: {
  message: 'Hello Vue!'
 },
 beforeCreate: function() {
  console.log(this.message); //undefind
 }
})

需要說明的有兩點(diǎn)：1、這里的 "this" 指向 Vue 實(shí)例，即 "vm"，2、Vue 實(shí)例同時(shí)也代理了選項(xiàng)中 "data" 下的所有屬性，也就是說 vm.message == vm.$data.message == "Hello Vue!"，但是因?yàn)樵谶@個(gè)階段數(shù)據(jù)并沒有綁定到 Vun 實(shí)例上面，所以輸出 "undefind"。在這之前數(shù)據(jù)會(huì)先保存在 vm.$options 中，如果要在這個(gè)階段獲取數(shù)據(jù)，可以先通過 vm.$options.data() 方法，返回 "data" 對(duì)象，通過 vm.$options.data().message 返回對(duì)應(yīng)的值。
在這個(gè)階段可以做一些不需要數(shù)據(jù)的工作，比如說開啟全局 loading 效果。

created：

在實(shí)例創(chuàng)建完成，數(shù)據(jù)綁定之后會(huì)調(diào)用這個(gè)函數(shù)，此時(shí) console.log(this.message) 輸出正確的值 "Hello Vue!"。
在這個(gè)階段，數(shù)據(jù)已經(jīng)初始化為選項(xiàng)中的默認(rèn)值，但是真實(shí)的數(shù)據(jù)還要通過 ajax 從后端數(shù)據(jù)庫獲取，因此這個(gè)階段可以向后端發(fā)請(qǐng)求獲取數(shù)據(jù)，然后綁定到對(duì)應(yīng)屬性上。

之后判斷選項(xiàng)中有無 "el" 屬性(作為 Vue 實(shí)例的掛載目標(biāo)，在這里就是 id 為 app 的 div 標(biāo)簽)，如果沒有，則需要手動(dòng)調(diào)用 vm.$mount(el) 方法指定掛載的目標(biāo)；

接著判斷選項(xiàng)中有無 "template" 屬性，如果沒有，則直接使用 "el" 屬性指定的掛載目標(biāo)，如果有，那么就用 "template" 屬性指定的字符串模板替換掛載目標(biāo)，掛載目標(biāo)中的所有內(nèi)容將被忽略；

beforeMount：

在實(shí)例掛載之前調(diào)用。

在這個(gè)階段可以移除全局 loading 效果。

mounted：

在實(shí)例掛載之后調(diào)用。

在這個(gè)階段頁面已經(jīng)加載完畢，可以對(duì) DOM 進(jìn)行操作。

beforeUpdate：

在數(shù)據(jù)更新時(shí)調(diào)用。

在這個(gè)階段可以在數(shù)據(jù)更新前訪問現(xiàn)有的 DOM。

updated：

在數(shù)據(jù)更新之后調(diào)用。

在這個(gè)階段可以對(duì)更新后的 DOM 進(jìn)行操作。

最新評(píng)論