Vue2.5筆記：Vue的實例與生命週期

理解與認識 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、生命週期鉤子函數等，讓實例產生咱們想要的行爲。

實例建立完成以後，咱們就可讓它與視圖同步，只要我修改數據視圖會自動跟着同步。

在實例的建立過程當中會存在許多的生命週期鉤子函數，它會在咱們實例的不一樣階段產生不一樣的效果。

關注個人微信公衆號：六小登登，更多幹貨文章，歡迎一塊兒交流。人人均可以成爲高手。我是一個會技術，又寫乾貨的碼農。歡迎勾搭。