理解與認識 Vue 的例項是我們學習 Vue 非常重要的一步，也是非常必須的，因為例項是它的一個起點，也是它的一個入口，只有我們建立一個 Vue 例項之後，我們才行利用它進行一些列的操作。

首先 Vue 沒有完全遵守 MVVM 的架構模式，但是它的設計也受到了該模式的啟發，Vue 也就是在該模式中起到 VM（ViewModel） 的作用。如果有對 MVC、MVVM 模式不瞭解的同學可以參考阮一峰老師的 《MVC，MVP 和 MVVM 的圖示》 這篇文章可以對它們有一個簡單對了解。

Vue 的例項從建立到使用以及銷燬的過程中會有多個生命週期鉤子，這些鉤子在我們整個的例項過程中起到了非常重要，而且有了這些鉤子我們可以很好的去控制我們的整個過程的邏輯。

Vue 借鑑了 MVVM 架構模式，Vue 在整個過程中起到的就是 VM 的作用，如果我們對 MVVM 有過了解，V 即 View（ 檢視層）就是我們看到的模版HTML，M 即 Model（資料層）就是我們想要顯示出來的資料，Vue 就是負責把 View－Model 連線起來。

mvvm

建立Vue例項

每個 Vue 例項都是通過 Vue 函式來建立的，在 Vue 中的每一個應用都是會建立一個例項，元件也是一個例項。

當建立一個 vue 例項的時候，我們可以傳入一個選項物件，如data、el、methods、生命週期鉤子函式等等。

var vm = new Vue({  el: '#root',  data: {    name: 'Modeng'  },  methods: {    handleClick () {        console.log(123);    }  }})
 

從上面的圖片我們看到我們的例項已經掛在到 DOM 元素上，資料和方法都已經擁有。最後我們就是要把這些資料怎麼顯示到我們到眼前，這裡就需要用到 Vue 另一個知識點 模版了。

<div id="root">    <div>Hello {{name}}</div></div>

我們只需要使用 模版的 {{}} 語法將我們的資料繫結到檢視上就能顯示我們要的結果。

如果你以為僅僅是這麼簡單那你就太年輕了，我們也就沒有使用 Vue 的必要了，當我們建立一個例項時，Vue 會把檢視與資料進行連線，當我們修改資料時，檢視會自動更新。

有一點值得我們注意的是，我們在使用 Vue 例項時，需要關注下 this，千萬不要在含有 this 的函式時，使用箭頭函式，因為箭頭函式是沒有繫結 this 的，所以會出現問題。

例項的屬性、方法與 API

除了上面我們所說的資料的屬性以外，Vue 給我們暴露了很多的例項與方法，例如： 「$data」、「$el」、「$watch」、「$refs」、「$watch」、「$mount」等等，如果你對等多的例項屬性與方法感興趣可以移至 API 參考，不過後面我們也會介紹一些常用的方法和屬性 watch、methods、refs等

Vue 例項不盡帶了很多等例項方法與屬性，還自帶了很多 API 其中全域性的有 11 個，全域性配置的有 9個，如果想檢視也是在上面的連結中。

生命週期構子

Vue 例項會有一個完整的生命週期，從例項的初始化，設定資料、編譯模板、將例項掛載到 DOM 更新資料，銷燬等一系列的過程，稱為生命週期，在不同的過程中會自動執行一些函式，我們稱為生命週期鉤子函式。Vue 給了我們很多 生命週期函式，我們可以在整個生命週期的不同過程中使用它。

下圖展示了例項的生命週期。你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。

鉤子函式

• beforeCreate： 在例項初始化之後，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫。
• created：在例項建立完成後被立即呼叫。在這一步，例項已完成以下的配置：資料觀測 (data observer)，屬性和方法的運算，watch/event 事件回撥。然而，掛載階段還沒開始，「$el」 屬性目前不可見。
• beforeMount：在掛載開始之前被呼叫：相關的 render 函式首次被呼叫。
• mounted：el 被新建立的 vm.$el 替換，並掛載到例項上去之後呼叫該鉤子。如果 root 例項掛載了一個文件內元素，當 mounted 被呼叫時 vm.$el 也在文件內。
• beforeUpdate：資料更新時呼叫，發生在虛擬 DOM 打補丁之前。這裡適合在更新之前訪問現有的 DOM，比如手動移除已新增的事件監聽器。
• updated：由於資料更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會呼叫該鉤子。當這個鉤子被呼叫時，元件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用計算屬性或 watcher 取而代之。
• activated：keep-alive 元件啟用時呼叫。
• deactivated：keep-alive 元件停用時呼叫。
• beforeDestroy：例項銷燬之前呼叫。在這一步，例項仍然完全可用。
• destroyed：Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。
• errorCaptured：2.5.0+ 新增，當捕獲一個來自子孫元件的錯誤時被呼叫。此鉤子會收到三個引數：錯誤物件、發生錯誤的元件例項以及一個包含錯誤來源資訊的字串。此鉤子可以返回 false 以阻止該錯誤繼續向上傳播。

var vm = new Vue({  el: "#root",  data: {    name: "Modeng",  },  beforeCreate() {    console.log("例項初始化");    console.log("beforeCreate");    console.log("------------------");  },  created() {    console.log("例項建立完成");    console.log("created");    console.log("------------------");  },  beforeMount () {    console.log("例項掛載DOM之前");    console.log("beforeMount");    console.log("------------------");  },  mounted () {    console.log("例項掛載DOM完成");    console.log("mounted");    console.log("------------------");  },  beforeUpdate () {    console.log("例項的資料更新之前");    console.log("beforeUpdate");    console.log("------------------");  },  updated () {    console.log("例項的資料更新完成，DOM更新");    console.log("updated");    console.log("------------------");  },  beforeDestroy () {    console.log("例項銷燬之前");    console.log("beforeDestory");    console.log("------------------");  },  destroyed () {    console.log("例項銷燬完成");    console.log("destoryed");    console.log("------------------");  }});

我們可以看到從例項開始建立到渲染掛載到 DOM 結束後，會執行的鉤子函式，下面我們來嘗試進行資料的更新與銷燬例項看看鉤子是怎麼執行的。

總結

這邊文章主要是介紹了下 Vue 的例項與生命週期，在Vue 例項化的過程中我們可以新增許多可選物件，比如 data、methods、生命週期鉤子函式等，讓例項產生我們想要的行為。

例項建立完成之後，我們就可以讓它與檢視同步，只要我修改資料檢視會自動跟著同步。

在例項的建立過程中會存在許多的生命週期鉤子函式，它會在我們例項的不同階段產生不同的效果。

本文原創文章釋出於微信公眾號：Modeng。關注並回復 「前端書籍」百本經典技術書籍免費領取，你懂的！